/*
 * 积分商城页样式。
 *
 * ⚠️ 全部选择器必须挂 .wxas-points-store / .wxas-points-store-page 前缀，
 *    不写裸标签、不做全局重置（不得用 * 选择器，也不得改 body / h1 等）。
 *    本文件会随任意页面的短代码一起入队，一个裸选择器就会污染全站。
 *
 * 颜色：优先取主题 CSS 变量，取不到才回落到下面的色值 ——
 * 这样商城页在深色主题下不会变成一块突兀的白底卡片。
 * 语义：绿色=可购买，红色=不可购买（与小程序端一致）。
 */

.wxas-points-store {
	--wps-accent: #0071e3;
	--wps-ink: #1d1d1f;
	--wps-ink-2: #6e6e73;
	--wps-line: rgba(0, 0, 0, 0.12);
	--wps-bg: #ffffff;
	--wps-surface: #f5f5f7;
	--wps-green: #1d8a4a;
	--wps-red: #c9342b;
	--wps-radius: 14px;

	/* 跟主题走：主题给了这些变量就直接继承。 */
	color: var(--wp--preset--color--contrast, var(--wps-ink, #1d1d1f));
}

/*
 * 深色主题下把卡片底色换掉。
 *
 * 用 prefers-color-scheme 而不是 WordPress 的 .is-dark-theme：
 * 商城页可能被放进任意主题的任意容器里，两种判据都可能有，
 * 至少让跟随系统的用户在深色下不面对白底黑字以外的反色问题。
 */
@media (prefers-color-scheme: dark) {
	.wxas-points-store {
		--wps-ink: #f5f5f7;
		--wps-ink-2: #a1a1a6;
		--wps-line: rgba(255, 255, 255, 0.16);
		--wps-bg: #1c1c1e;
		--wps-surface: #2c2c2e;
		--wps-green: #48c774;
		--wps-red: #ff6b60;
		--wps-accent: #4aa3ff;
	}

	/*
	 * 深色下的 rgba 兜底也跟着换。
	 *
	 * 兜底色是写死的 rgba(0,113,227,.1)，那是浅底上调出来的值；
	 * 直接用在深底上会让这块比卡片本身还亮，看起来像一块补丁。
	 */
	.wxas-points-store__cta {
		background: rgba(74, 163, 255, 0.16);
	}
}

.wxas-points-store__title {
	margin: 0 0 20px;
	font-size: 22px;
	font-weight: 600;
	color: var(--wps-ink);
}

/*
 * 网格：默认三列，窄屏自动降为两列/一列。
 *
 * --was-points-columns 由 render_store() 按 shortcode/模板的 columns
 * 参数内联注入（0 时不输出该变量，走下面的默认值）。
 */
.wxas-points-store__grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(var(--wxas-points-columns, 3), minmax(0, 1fr));
}

@media (max-width: 900px) {
	.wxas-points-store__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.wxas-points-store__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------- 卡片 */

.wxas-points-store__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	border: 1px solid var(--wps-line);
	border-radius: var(--wps-radius);
	background: var(--wps-bg);
	/* 网格项默认会被内容撑高，等高需要显式声明。 */
	min-width: 0;
}

/*
 * 不可购买的套餐：整卡降透明度，但**不隐藏**。
 *
 * 站长需要一眼看出「这里有个套餐还没配好」，而不是发现商城里少了东西。
 */
.wxas-points-store__item--off {
	opacity: 0.72;
}

.wxas-points-store__name {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wps-ink);
	/* 长套餐名换行而不是把卡片撑宽。 */
	overflow-wrap: anywhere;
}

.wxas-points-store__desc {
	font-size: 13px;
	line-height: 1.6;
	color: var(--wps-ink-2);
	overflow-wrap: anywhere;
}

/* 积分数是卡片主角，字号最大。 */
.wxas-points-store__points {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-top: 4px;
	color: var(--wps-accent);
}

.wxas-points-store__points-num {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.wxas-points-store__points-unit {
	font-size: 14px;
	font-weight: 500;
	opacity: 0.85;
}

.wxas-points-store__valid,
.wxas-points-store__unit {
	font-size: 12px;
	color: var(--wps-ink-2);
}

/*
 * 底部价格行：价格靠左、提示靠右。
 * margin-top:auto 让按钮始终贴在卡片底部，卡片等高时看起来才齐整。
 */
.wxas-points-store__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 12px;
}

.wxas-points-store__price {
	font-size: 20px;
	font-weight: 700;
	color: var(--wps-ink);
}

.wxas-points-store__price--off {
	font-size: 14px;
	font-weight: 500;
	color: var(--wps-ink-2);
}

/*
 * 行动区。
 *
 * ⚠️ 首版**刻意**没有「立即购买」按钮：网站端不具备代客下单的身份，
 *    而小程序码每套餐一次微信接口调用，渲染期绝对不能调。
 *    这里输出的是明确的下一步文案，而不是一个点了没反应的死按钮。
 *    详情见 WXAS_Points_Frontend::render_plan()。
 */
.wxas-points-store__cta {
	margin-top: 12px;
	padding: 11px 16px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	color: var(--wps-accent, #0071e3);
	/*
	 * 半透明底：深浅两种主题下都保持可读。
	 *
	 * ⚠️ 先给 rgba 兜底、再覆盖 color-mix：
	 *    color-mix() 在旧浏览器里整条声明失效，若它是唯一一条，
	 *    这块就变成**完全没有背景**的裸文字 —— 视觉上像没写样式，
	 *    却没有任何报错。rgba 这层保证任何环境下都有底色。
	 */
	background: rgba(0, 113, 227, 0.1);
	background: color-mix(in srgb, var(--wps-accent, #0071e3) 10%, transparent);
}

.wxas-points-store__cta--off {
	color: var(--wps-ink-2);
	background: var(--wps-surface, #f5f5f7);
	/* 长原因文案要能换行，不能被裁掉。 */
	line-height: 1.5;
	padding: 9px 14px;
}

/* ------------------------------------------------------- 商城小程序码 */

.wxas-points-store__scan {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
	padding: 18px;
	border: 1px solid var(--wps-line);
	border-radius: var(--wps-radius, 14px);
	background: var(--wps-surface, #f5f5f7);
}

.wxas-points-store__scan-btn {
	padding: 10px 20px;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: #ffffff;
	background: var(--wps-green, #1d8a4a);
	cursor: pointer;
	transition: opacity .15s ease;
}

.wxas-points-store__scan-btn:hover {
	opacity: .88;
}

.wxas-points-store__scan-btn:disabled {
	cursor: progress;
	opacity: .7;
}

.wxas-points-store__scan-btn:focus-visible {
	outline: 2px solid var(--wps-accent, #0071e3);
	outline-offset: 2px;
}

/*
 * [hidden] 必须显式压过。
 *
 * 容器是 flex 布局，UA 对 [hidden] 的 display:none 会被
 * `display:flex` 覆盖掉 —— 那样「还没出码」时页面会直接露出
 * 一个空白方框加一行提示，像是坏了。
 */
.wxas-points-store__scan-box[hidden] {
	display: none;
}

.wxas-points-store__scan-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.wxas-points-store__scan-img {
	display: block;
	width: 180px;
	height: 180px;
	/* 二维码必须保持像素锐利，缩放插值会让它扫不出来。 */
	image-rendering: pixelated;
}

.wxas-points-store__scan-tip {
	font-size: 13px;
	line-height: 1.6;
	color: var(--wps-ink-2);
	text-align: center;
}

/* ------------------------------------------------------------ 管理员提示 */

.wxas-points-store__notice {
	padding: 16px 20px;
	border: 1px solid var(--wps-line);
	border-left: 4px solid var(--wps-accent, #0071e3);
	border-radius: 8px;
	background: var(--wps-surface, #f5f5f7);
	font-size: 14px;
	color: var(--wps-ink-2);
}

/* -------------------------------------------------------------- 页面模板 */

.wxas-points-store-page {
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 16px;
}

.wxas-points-store-page__title {
	margin: 0 0 16px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.3;
}

.wxas-points-store-page__intro {
	margin-bottom: 28px;
	font-size: 15px;
	line-height: 1.7;
	opacity: 0.85;
}