/* JZ 套餐扫码直付 v1.1 —— 遮住结账页 + 弹层外观。
   二维码本身由 woo-paygate 的 code_url 在弹层里重绘，不再嵌 iframe。 */

/* ============================================================
   一、结账页自动提交时：盖住原页面
   ============================================================ */
html.jz-pp-auto body {
	visibility: hidden !important;
}

html.jz-pp-auto body::after {
	content: "";
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #ffffff;
	visibility: visible;
	z-index: 2147483000;
}

html.jz-pp-auto body::before {
	content: "正在创建订单，请稍候…";
	position: fixed;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	text-align: center;
	visibility: visible;
	z-index: 2147483001;
	font-size: 15px;
	line-height: 1.6;
	color: #6b7280;
	font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ============================================================
   二、弹层
   ============================================================ */
html.jz-pp-lock,
html.jz-pp-lock body {
	overflow: hidden !important;
}

.jz-pp-mask {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(17, 17, 20, 0.55);
	z-index: 2147483100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
	animation: jz-pp-fade 0.18s ease both;
}

@keyframes jz-pp-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.jz-pp-card {
	position: relative;
	width: 360px;
	max-width: 100%;
	background: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 20px 56px rgba(0, 0, 0, 0.2);
	font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
	animation: jz-pp-pop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
	box-sizing: border-box;
}

.jz-pp-card * {
	box-sizing: border-box;
}

@keyframes jz-pp-pop {
	from { transform: scale(0.95); opacity: 0.4; }
	to   { transform: scale(1); opacity: 1; }
}

/* ---------- 关闭 ---------- */
.jz-pp-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f4f5f7;
	color: #9aa0aa;
	font-size: 17px;
	line-height: 25px;
	text-align: center;
	cursor: pointer;
	z-index: 6;
	font-family: inherit;
	transition: background 0.15s, color 0.15s;
}

.jz-pp-close:hover {
	background: #e8eaed;
	color: #4b5563;
}

/* ---------- 头部 ---------- */
.jz-pp-head {
	padding: 26px 24px 0;
	text-align: center;
}

.jz-pp-title {
	font-size: 15px;
	font-weight: 500;
	color: #1f2329;
	letter-spacing: 0.2px;
}

.jz-pp-amount {
	margin-top: 6px;
	font-size: 26px;
	font-weight: 600;
	color: #6739b6;
	letter-spacing: -0.4px;
	line-height: 1.25;
}

.jz-pp-amount[hidden] {
	display: none !important;
}

/* ---------- 二维码区 ---------- */
.jz-pp-qrwrap {
	position: relative;
	padding: 20px 24px 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 250px;
}

.jz-pp-qr {
	/* 必须 content-box：卡片内统一用了 border-box，
	   若沿用会把 10px 内边距算进 208，内容区只剩 186，
	   导致 208 像素的二维码被非整数比缩小而发虚 */
	box-sizing: content-box;
	width: 208px;
	height: 208px;
	padding: 10px;
	background: #ffffff;
	border: 1px solid #eef0f3;
	border-radius: 12px;
	opacity: 0;
	transition: opacity 0.25s ease;
	line-height: 0;
}

.jz-pp-qr canvas,
.jz-pp-qr img,
.jz-pp-qr table {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 4px;
}

.jz-pp-qr table {
	border-collapse: collapse;
	border: 0;
}

.jz-pp-card.is-ready .jz-pp-qr {
	opacity: 1;
}

/* ---------- 加载态 ---------- */
.jz-pp-loading {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: #ffffff;
	transition: opacity 0.25s ease;
}

.jz-pp-card.is-ready .jz-pp-loading,
.jz-pp-card.is-frame .jz-pp-loading {
	opacity: 0;
	pointer-events: none;
}

.jz-pp-spin {
	width: 30px;
	height: 30px;
	border: 2.5px solid #f0eaf9;
	border-top-color: #6739b6;
	border-radius: 50%;
	animation: jz-pp-spin 0.8s linear infinite;
}

@keyframes jz-pp-spin {
	to { transform: rotate(360deg); }
}

.jz-pp-loadtxt {
	font-style: normal;
	font-size: 13px;
	color: #9aa0aa;
}

/* ---------- 超时出口（支付页打不开时不能一直转圈） ---------- */
.jz-pp-timeout {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background: #ffffff;
	padding: 0 26px;
	text-align: center;
}

.jz-pp-timeout[hidden] {
	display: none !important;
}

.jz-pp-totxt {
	margin: 0;
	font-size: 14px;
	color: #6b7280;
	line-height: 1.65;
}

.jz-pp-retry {
	border: 1px solid #6739b6;
	background: #ffffff;
	color: #6739b6;
	font-size: 14px;
	font-family: inherit;
	padding: 9px 24px;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.jz-pp-retry:hover {
	background: #6739b6;
	color: #ffffff;
}

.jz-pp-card.is-timeout .jz-pp-loading {
	opacity: 0;
	pointer-events: none;
}

.jz-pp-card.is-timeout .jz-pp-hint {
	opacity: 0.4;
}

/* ---------- 提示 ---------- */
.jz-pp-hint {
	padding: 0 24px 18px;
	text-align: center;
	font-size: 13px;
	color: #6b7280;
	transition: opacity 0.2s ease;
}

.jz-pp-foot {
	padding: 13px 24px;
	border-top: 1px solid #f2f3f5;
	background: #fcfcfd;
	text-align: center;
	font-size: 12px;
	color: #9aa0aa;
	line-height: 1.5;
}

/* ============================================================
   三、隐藏的 runner iframe（只负责建单出码，不可见）
   ============================================================ */
.jz-pp-runner {
	position: fixed;
	top: 0;
	left: -9999px;
	width: 1px;
	height: 1px;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

/* ============================================================
   四、降级：自绘失败时把 iframe 显示出来
   ============================================================ */
.jz-pp-slot {
	display: none;
	width: 100%;
}

.jz-pp-card.is-frame {
	width: 400px;
}

.jz-pp-card.is-frame .jz-pp-qr,
.jz-pp-card.is-frame .jz-pp-loading {
	display: none;
}

.jz-pp-card.is-frame .jz-pp-qrwrap {
	padding: 0;
	min-height: 0;
	display: block;
}

.jz-pp-card.is-frame .jz-pp-hint,
.jz-pp-card.is-frame .jz-pp-amount {
	display: none;
}

.jz-pp-card.is-frame .jz-pp-slot {
	display: block;
}

.jz-pp-frame {
	display: block;
	width: 100%;
	height: 430px;
	border: 0;
	background: #ffffff;
}

/* ============================================================
   五、支付成功
   ============================================================ */
.jz-pp-card.is-paid .jz-pp-qrwrap::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(255, 255, 255, 0.92);
	z-index: 8;
}

.jz-pp-card.is-paid .jz-pp-title::after {
	content: "支付成功，正在跳转…";
}

.jz-pp-card.is-paid .jz-pp-title {
	font-size: 0;
}

.jz-pp-card.is-paid .jz-pp-title::after {
	font-size: 15px;
	color: #0f6e56;
}

/* ============================================================
   六、小屏兜底（正常情况下手机端不会走弹层）
   ============================================================ */
@media (max-width: 420px) {
	.jz-pp-card {
		width: 100%;
	}
	.jz-pp-card.is-frame {
		width: 100%;
	}
	/* 只收窄两侧留白，二维码本身保持 208 像素 1:1，不缩放 */
	.jz-pp-qrwrap {
		padding-left: 12px;
		padding-right: 12px;
	}
}