/*
 * 小程序码覆盖层 —— 全站二维码的统一展示契约（底座公共资源）。
 *
 * ## 它解决什么问题
 *
 * 网页前端有三处在展示小程序码：内容锁（ext-content）、付费墙（ext-pay）、
 * 授权卡（ext-license）。三处的「码盒子」类名不同，但**刷新入口的摆法**
 * 曾经各不相同 —— 有的排在码下方，有的塞在右侧文字区里。用户在一个
 * 页面学会的操作，换一个页面就得重新找。
 *
 * 登录码（ext-login 的 `.wxas-qr__overlay`）是最早正确的形态：
 * **刷新按钮盖在码上**，码失效时直接顶替码的位置，不需要用户把视线
 * 移到别处。本文件把那个形态提取成公共类，其余三处共用。
 *
 * ## ⚠️ 刷新入口只保留**一处**
 *
 * 早期版本在覆盖层之外，还在码的右下角挂了一个常驻小图标
 * （`.wxas-qrbox__refresh`，「码还没过期也能主动换一张」）。它有两个问题：
 *   ① 贴在码的右下角 —— 那是小程序码的**定位角**，压住会影响可扫性；
 *   ② 与覆盖层按钮是**两个含义相同**的入口，用户要先分辨用哪个。
 *
 * 现已取消该图标：刷新只在覆盖层里，规则唯一 ——
 * 「码过期了 → 覆盖层盖上来 → 点圆形刷新图标」。
 *
 * ## 用法（三步，不改变调用方原有布局）
 *
 * ```html
 * <div class="你自己的码盒子类 wxas-qrbox">      <!-- ① 追加类，不替换 -->
 *     <span class="…骨架…"></span>
 *     <img class="…码图…" />
 *
 *     <div class="wxas-qrbox__overlay" hidden>   <!-- ② 覆盖层，默认隐藏 -->
 *         <span class="wxas-qrbox__overlay-text">二维码已过期</span>
 *         <!-- 文字按钮 -->
 *         <button class="wxas-qrbox__btn">登录</button>
 *         <!-- 或图标按钮（刷新入口，见 .wxas-qrbox__btn--icon） -->
 *         <button class="wxas-qrbox__btn wxas-qrbox__btn--icon"
 *                 aria-label="刷新二维码">[svg]</button>
 *     </div>
 * </div>
 * ```
 *
 * ③ JS 只需 `overlay.hidden = ! show;` —— 不必碰按钮自身。
 *
 * ⚠️ 覆盖层必须放在**码盒子内部**，且码盒子要有定位上下文 ——
 *    这正是 `.wxas-qrbox` 提供的 `position: relative`。
 *
 * @package WX_App_Suite
 */

/* ------------------------------------------------------------------ 码盒子 */

/*
 * 叠放上下文 + 裁剪。
 *
 * `overflow: hidden` 不可省：覆盖层用 `inset: 0` 铺满，若码盒子带圆角
 * 而自身不裁剪，覆盖层的直角会溢出到圆角外面去。
 */
.wxas-qrbox {
	position: relative;
	overflow: hidden;
}

/* ------------------------------------------------------------------ 覆盖层 */

.wxas-qrbox__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 1rem;
	text-align: center;

	/*
	 * 白底半透明，而不是跟随主题变量。
	 *
	 * 二维码本身必须是白底黑码（深底上微信扫不出来），所以覆盖层盖在
	 * 它上面时也应当是同族的浅色面 —— 否则深色主题下会看到「深色遮罩
	 * 盖住白色码框」的割裂效果。字色因此也固定为深色。
	 */
	background: rgba(255, 255, 255, 0.94);
}

/*
 * ⚠️⚠️ 这条 `!important` 不可删，它是整个覆盖层的显隐开关。
 *
 * 上面那条规则写了 `display: flex`，与 UA 样式表的
 * `[hidden] { display: none }` 同为 (0,1,0) 优先级 ——
 * 而**作者样式表恒优先于 UA 样式表**，于是 `hidden` 属性被静默架空：
 * HTML 里的 `hidden`、JS 里的 `el.hidden = true`，全部不产生任何视觉效果。
 *
 * 登录组件上真实发生过同类事故（信息完善弹窗永远盖在登录框上、
 * 遮罩层永久拦截点击、tab 切不动），排查时一度以为是「逻辑顺序不对」。
 * 详见 extensions/ext-login/assets/login.css 顶部的 hidden 兜底注释。
 */
.wxas-qrbox__overlay[hidden] {
	display: none !important;
}

.wxas-qrbox__overlay-text {
	color: #1d2327;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.6;
}

/* -------------------------------------------------------------- 覆盖层按钮 */

/*
 * 自带完整外观，不复用各处的按钮类 —— 覆盖层是「深色文字压在白色码框上」
 * 这个特殊底色，沿用页面主色按钮（在深色主题下往往是亮色）会失去对比度。
 */
.wxas-qrbox__btn {
	width: auto;
	/*
	 * 覆盖层按钮既可能是 <button>（重试/重新生成），也可能是 <a>
	 * （未登录时的「登录」跳转）。inline-block + 去下划线 + 继承居中，
	 * 让两种标签渲染一致，不必各自再补一套样式。
	 */
	display: inline-block;
	padding: 0.5rem 0.875rem;
	border: 1px solid #c3c4c7;
	border-radius: 0.375rem;
	background: #ffffff;
	color: #1d2327;
	font-size: 0.875rem;
	font-family: inherit;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.wxas-qrbox__btn:hover {
	background: #f0f0f1;
}

.wxas-qrbox__btn:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

.wxas-qrbox__btn:disabled {
	opacity: 0.6;
	cursor: default;
}

/* ---------------------------------------------------- 覆盖层按钮：图标形态 */

/*
 * 图标形态的覆盖层按钮（当前只有「刷新」用它）。
 *
 * 它是覆盖层里**唯一的操作入口**：码失效后覆盖层盖上来，上面一行文字
 * 「二维码已过期」，下面就是这个圆形刷新图标。
 *
 * 与文字版（`.wxas-qrbox__btn`）的差别只在尺寸与形状 —— 底色、边框、
 * 悬停、聚焦全部沿用基类，两种形态因此观感一致。
 *
 * ⚠️ 44px 是**触摸目标下限**，不是审美选择：图标本身只画 20px，
 *    但整圆仍是 44px，手指才点得准。
 *
 * ⚠️ 图标必须是内联 `<svg>`（见各扩展的 `icon_refresh()`），
 *    不要用 `↻` 这类字符：字符大小随系统字体变，在固定直径的圆里会忽大忽小。
 */
.wxas-qrbox__btn--icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border-radius: 50%;
	/*
	 * 覆盖层底色接近纯白，纯白按钮会「融」进背景里，
	 * 所以基类的白底在这里压一档灰。
	 */
	background: #f0f0f1;
}

.wxas-qrbox__btn--icon:hover {
	background: #e3e5e8;
}

.wxas-qrbox__btn--icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* -------------------------------------------------------------- 倒计时 */

/*
 * 码下方的有效期倒计时。JS 每 1 秒刷新一次文本。
 *
 * 它是码盒子的**兄弟节点**（不是子节点）：盖在码上的覆盖层只管失效态，
 * 倒计时则是常驻在码下方的一行小字，两者职责不重叠。
 */
.wxas-qrbox__countdown {
	margin-top: 0.5rem;
	text-align: center;
	font-size: 0.8125rem;
	color: #646970;
	line-height: 1.4;
}

.wxas-qrbox__countdown[hidden] {
	display: none !important;
}

/* 尊重用户的减少动效偏好（与其它前端样式同一口径）。 */
@media (prefers-reduced-motion: reduce) {
	.wxas-qrbox__btn {
		transition: none;
	}
}