/*
 * 授权售卖样式。
 *
 * 设计原则（与 assets/user-center.css 同一口径）：
 *   ① 用 CSS 变量承接主题，不硬编码品牌色 —— 售卖入口要能放进任意页面，
 *      写死颜色会在深色主题下出现「白底黑字卡在暗色页面里」的割裂感。
 *   ② 二维码容器**固定白底**由 ext_pay 的 pay.css 负责，本文件不重复定义，
 *      也**不要**给它加暗色变量 —— 微信在暗色背景下扫不出反色二维码。
 *   ③ 无渐变、无阴影滥用、圆角统一 —— 保持克制。
 *   ④ 本文件的类名 `.wxas-paywall__*` 部分是**复用** ext_pay 已有样式的，
 *      这里只补授权场景特有的部分，不重复造轮子。
 */

/*
 * 变量域：卡片与售卖页容器共用一套（售卖页里的标题、引言不在卡片内，
 * 若只挂在 .wxas-license 上，它们会拿不到变量而回退成浏览器默认色）。
 */
.wxas-license,
.wxas-license-store {
	--lc-bg: #ffffff;
	--lc-bg-soft: #f7f7f8;
	--lc-border: rgba(0, 0, 0, 0.1);
	--lc-text: #1f2328;
	--lc-text-muted: #6b7280;
	--lc-accent: #2563eb;
	/*
	 * 按钮上的文字色。必须独立成变量：主按钮是「亮底 + 对比色文字」，
	 * 而 --lc-accent 在深浅两套里亮度差别很大（浅色 #2563eb 配白字 5.2:1，
	 * 深色 #4f8cff 配白字只有 3.2:1 不达 AA）——写死 #fff 会在深色下失守。
	 */
	--lc-on-accent: #ffffff;
	--lc-ok: #16a34a;
	--lc-warn: #b45309;
	--lc-radius: 12px;
	--lc-radius-sm: 8px;
}

.wxas-license {
	display: block;
	margin: 0 0 20px;
	padding: 16px;
	color: var(--lc-text);
	background: var(--lc-bg);
	border: 1px solid var(--lc-border);
	border-radius: var(--lc-radius);
	font-size: 14px;
	line-height: 1.6;
	box-sizing: border-box;
}

.wxas-license *,
.wxas-license *::before,
.wxas-license *::after {
	box-sizing: inherit;
}

/* 跟随站点深色偏好：只改自身的变量，不动主题。 */
@media (prefers-color-scheme: dark) {
	.wxas-license,
	.wxas-license-store {
		--lc-bg: #1c1c1f;
		--lc-bg-soft: #26262a;
		--lc-border: rgba(255, 255, 255, 0.14);
		--lc-text: #ecedee;
		--lc-text-muted: #9ca3af;
		--lc-accent: #4f8cff;
		/* 深色下亮蓝配白字不达标，改用近黑文字（5.8:1）。 */
		--lc-on-accent: #0b1220;
		--lc-ok: #4ade80;
		--lc-warn: #fbbf24;
	}
}

/* 卡片嵌在收款面板外层时，面板自身的边距由 pay.css 决定，这里不干预。 */
.wxas-license .wxas-paywall {
	margin-bottom: 0;
}

/* ── 卡片头部 ───────────────────────────────────────────── */

.wxas-license__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.wxas-license__title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}

.wxas-license__badge {
	flex: 0 0 auto;
	padding: 2px 10px;
	font-size: 12px;
	color: var(--lc-ok);
	background: var(--lc-bg-soft);
	border: 1px solid var(--lc-border);
	border-radius: 999px;
}

.wxas-license__badge--wait {
	color: var(--lc-warn);
}

/* ── 事实区 ─────────────────────────────────────────────── */

.wxas-license__facts-wrap {
	margin-bottom: 12px;
}

.wxas-license__subtitle {
	margin-bottom: 4px;
	color: var(--lc-text-muted);
	font-size: 13px;
}

.wxas-license__list {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.wxas-license__list li {
	display: flex;
	gap: 8px;
	padding: 4px 0;
	border-top: 1px dashed var(--lc-border);
	font-size: 13px;
}

.wxas-license__list li:first-child {
	border-top: 0;
}

.wxas-license__list-k {
	flex: 0 0 84px;
	color: var(--lc-text-muted);
}

.wxas-license__list-v {
	flex: 1 1 auto;
	word-break: break-word;
}

/* ── 授权码 ─────────────────────────────────────────────── */

.wxas-license__key {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 12px;
	margin-bottom: 12px;
	background: var(--lc-bg-soft);
	border: 1px solid var(--lc-border);
	border-radius: var(--lc-radius-sm);
}

.wxas-license__key-label {
	flex: 0 0 100%;
	color: var(--lc-text-muted);
	font-size: 12px;
}

.wxas-license__key-value {
	flex: 1 1 auto;
	min-width: 0;
	padding: 6px 8px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.06em;
	word-break: break-all;
	color: var(--lc-text);
	background: var(--lc-bg);
	border: 1px solid var(--lc-border);
	border-radius: var(--lc-radius-sm);
	/* 点一下就整段选中：复制按钮没脚本可跑时，用户仍能手动完成。 */
	user-select: all;
}

.wxas-license__copy {
	flex: 0 0 auto;
	padding: 6px 14px;
	font-size: 13px;
	color: var(--lc-text);
	background: var(--lc-bg);
	border: 1px solid var(--lc-border);
	border-radius: var(--lc-radius-sm);
	cursor: pointer;
}

.wxas-license__copy:hover {
	border-color: var(--lc-accent);
	color: var(--lc-accent);
}

/* ── 详情表（已拥有态） ─────────────────────────────────── */

.wxas-license__facts {
	display: grid;
	grid-template-columns: 84px 1fr;
	gap: 4px 12px;
	margin: 0 0 12px;
	font-size: 13px;
}

.wxas-license__facts dt {
	color: var(--lc-text-muted);
}

.wxas-license__facts dd {
	margin: 0;
	word-break: break-word;
}

/* ── 状态提示 ───────────────────────────────────────────── */

.wxas-license__status {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	padding: 10px 12px;
	margin-bottom: 8px;
	font-size: 13px;
	background: var(--lc-bg-soft);
	border: 1px solid var(--lc-border);
	border-radius: var(--lc-radius-sm);
}

.wxas-license__status-icon {
	flex: 0 0 auto;
}

.wxas-license__note {
	color: var(--lc-text-muted);
	font-size: 12px;
}

/* ── 登记「这枚授权给哪个站」 ───────────────────────────── */

/*
 * 这一屏是买家**还没付钱**时唯一要做的事，所以只突出一个元素：
 * 输入框。其余装饰一律不加 —— 表单旁边躺着「立即付款」的收款码时，
 * 任何一个多余的视觉焦点都会让人以为可以直接跳过这一步。
 */

.wxas-license--bind .wxas-license__facts-wrap {
	margin-bottom: 16px;
}

.wxas-license__form {
	margin: 0;
}

.wxas-license__field {
	display: block;
	margin-bottom: 8px;
}

.wxas-license__field-k {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--lc-text);
}

.wxas-license__input {
	display: block;
	width: 100%;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	color: var(--lc-text);
	background: var(--lc-bg);
	border: 1px solid var(--lc-border);
	border-radius: var(--lc-radius-sm);
}

/* 用 outline 而不是 box-shadow 画聚焦环：不引入阴影，且天然跟随变量色，
   主题若覆盖了 --lc-accent 也不会脱节。 */
.wxas-license__input:focus {
	outline: 2px solid var(--lc-accent);
	outline-offset: 1px;
}

.wxas-license__hint {
	margin: 0 0 12px;
	color: var(--lc-text-muted);
	font-size: 12px;
	line-height: 1.5;
}

.wxas-license__submit {
	display: block;
	width: 100%;
	padding: 10px 16px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--lc-on-accent);
	background: var(--lc-accent);
	border: 1px solid var(--lc-accent);
	border-radius: var(--lc-radius-sm);
	cursor: pointer;
}

/* 不用 filter: brightness() 做悬停态：深色偏好下会把亮蓝压成灰。 */
.wxas-license__submit:hover {
	opacity: 0.92;
}

.wxas-license__submit:focus-visible {
	outline: 2px solid var(--lc-accent);
	outline-offset: 2px;
}

/*
 * 「立即购买」按钮（短代码的按钮形态）用 `<a>` 而非 `<button>` ——
 * 它是链接，要能右键复制地址、能被搜索引擎跟随。
 *
 * ⚠️ 因此必须显式补上锚点特有的三条：`__submit` 那份是按 button 写的，
 *    直接套在 `<a>` 上会带下划线、文字左对齐、且继承主题的链接色。
 *
 * ⚠️ 这两条原来借用的是 ext-pay 的 `.wxas-paywall__btn` ——
 *    跨扩展借类，且从未声明依赖 pay.css。现改为本扩展自己的类。
 */
.wxas-license__submit--link {
	display: block;
	text-align: center;
	text-decoration: none;
}

.wxas-license__submit--link:hover {
	text-decoration: none;
}

.wxas-license__alert {
	padding: 10px 12px;
	margin-bottom: 12px;
	font-size: 13px;
	color: var(--lc-warn);
	background: var(--lc-bg-soft);
	border: 1px solid var(--lc-border);
	border-radius: var(--lc-radius-sm);
}

/* ── 「将授权给 xxx」摘要 ──────────────────────────────── */

/*
 * 只显示买家填的**原文**（他认得出 https://abc.com），不显示派生指纹
 * （site-8242a438… 只会让人怀疑自己填错了）。
 * 域名用等宽字体：l/1、0/O 在普通字体里几乎同形，而域名错一个字符
 * 就绑到另一个站上。
 */

.wxas-license__bound {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 8px;
	padding: 10px 12px;
	margin-bottom: 12px;
	font-size: 13px;
	background: var(--lc-bg-soft);
	border: 1px solid var(--lc-border);
	border-radius: var(--lc-radius-sm);
}

.wxas-license__bound-k {
	flex: 0 0 auto;
	color: var(--lc-text-muted);
}

.wxas-license__bound-v {
	flex: 1 1 auto;
	min-width: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	word-break: break-all;
	color: var(--lc-text);
}

/*
 * 发码多次失败、需人工处理时给出的**订单号**。
 *
 * 等宽：l/1、0/O 在这里同样是致命的 —— 买家要逐字符把它报给站长，
 * 抄错一位就定位不到那笔记录。
 * break-all：订单号是 24 位无分隔串（wxas + 时间 + 随机），
 * 窄屏下不允许断行会直接顶破卡片。
 */
.wxas-license__trade-no {
	display: inline-block;
	max-width: 100%;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	word-break: break-all;
	color: var(--lc-text);
}

.wxas-license__unbind {
	margin: 0 0 12px;
}

/* 视觉上是链接、语义上是按钮（它会改数据，必须是 POST 表单）。 */
.wxas-license__link {
	padding: 0;
	font-family: inherit;
	font-size: 12px;
	color: var(--lc-accent);
	background: none;
	border: 0;
	text-decoration: underline;
	cursor: pointer;
}

.wxas-license__link:hover {
	text-decoration: none;
}

/* ── 已购站点清单（多站点：一个用户可以为多个网站各买一份） ── */

/*
 * 一枚授权码只绑一个网站（max_devices 默认 1），所以「买过授权」不等于
 * 「这个套餐到头了」。这张清单要回答的是一个具体问题：
 * **我已经买过哪几个站？** —— 不给它，用户分不清手上几张码各是给谁的
 * （本次需求的原话），也容易把同一个站再登记一遍、白占一个设备名额。
 */
.wxas-license__sites {
	margin: 0 0 16px;
	padding: 12px 14px;
	background: var(--lc-bg-soft);
	border: 1px solid var(--lc-border);
	border-radius: var(--lc-radius-sm);
}

.wxas-license__sites-title {
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--lc-text);
}

.wxas-license__site {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	padding: 8px 0;
	border-top: 1px solid var(--lc-border);
}

/* 第一条不留分隔线，否则清单顶部会多出一道悬空的横线。 */
.wxas-license__site:first-of-type {
	padding-top: 0;
	border-top: 0;
}

.wxas-license__site-head {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

/*
 * 域名用等宽 + break-all，不用省略号：
 * 用户在这里要**核对**是哪一站，截断会把顶级域吃掉；
 * 而子域很长的域名（cdn.a.b.example）在窄屏下必须允许断行。
 */
.wxas-license__site-name {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	color: var(--lc-text);
	word-break: break-all;
}

.wxas-license__site-now {
	flex: none;
	padding: 1px 6px;
	font-size: 11px;
	line-height: 1.5;
	color: var(--lc-accent);
	background: var(--lc-bg);
	border: 1px solid var(--lc-border);
	border-radius: 999px;
}

.wxas-license__site-key {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	color: var(--lc-text-muted);
	word-break: break-all;
}

/* 发码中的行：那里放的是状态文案，不是码，不该显示成等宽。 */
.wxas-license__site-key--wait {
	font-family: inherit;
	color: var(--lc-warn);
}

/* 当前卡片对应的那个站：加一条左侧强调，扫一眼就能和上面那张码对上。 */
.wxas-license__site--now {
	padding-left: 10px;
	box-shadow: inset 2px 0 0 var(--lc-accent);
}

/* ── 纯按钮形态 ─────────────────────────────────────────── */

.wxas-license--button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
}

.wxas-license__button-name {
	font-weight: 600;
}

/*
 * 短代码按钮形态里的「立即购买」。
 *
 * ⚠️ 选择器原先是 `.wxas-license--button .wxas-paywall__btn` ——
 *    借 ext-pay 的按钮类。已改为本扩展自己的 `__submit--link`
 *    （见 class-license-frontend.php 的 render_button）。
 *    漏改这里会让按钮失去外边距归零，在按钮形态下多出一段空隙。
 */
.wxas-license--button .wxas-license__submit--link {
	margin: 0;
}

/* ── 售卖页（列表） ─────────────────────────────────────── */

.wxas-license-store {
	max-width: 1040px;
	margin: 0 auto;
	padding: 8px 0 32px;
	color: var(--lc-text);
	font-size: 14px;
	line-height: 1.6;
	box-sizing: border-box;
}

.wxas-license-store *,
.wxas-license-store *::before,
.wxas-license-store *::after {
	box-sizing: inherit;
}

.wxas-license-store__title {
	margin: 0 0 16px;
	font-size: 22px;
	line-height: 1.3;
}

.wxas-license-store__intro {
	margin: 0 0 20px;
	color: var(--lc-text-muted);
}

.wxas-license-store__grid {
	display: grid;
	grid-template-columns: repeat(var(--wxas-license-columns, 1), minmax(0, 1fr));
	gap: 16px;
	align-items: start;
}

@media (min-width: 720px) {
	.wxas-license-store__grid {
		grid-template-columns: repeat(var(--wxas-license-columns, 2), minmax(0, 1fr));
	}
}

@media (min-width: 1040px) {
	.wxas-license-store__grid {
		grid-template-columns: repeat(var(--wxas-license-columns, 3), minmax(0, 1fr));
	}
}