/**
 * VIP 权益页（page-vip.php）专用样式
 *
 * 同个人中心：只有这一页用得到，从 style.css 下沉出来。
 * 三档套餐只用一个强调色（--gold），靠边框深浅 + 徽章 + 放大分级。
 */
/* ----- VIP 页：权益对照表 ----- */
.vip-cell {
	padding: 14px;
	text-align: center
}

.vip-cell--label {
	padding: 14px 16px;
	font-size: 14px;
	color: var(--text)
}

.vip-cell--muted {
	color: var(--muted)
}

.vip-cell--vip {
	color: var(--gold-text)
}

/* 「权益」表每行之间的细线。
   比主题的 --border-soft（≈ 6% 黑）再轻一档，只要 4% —— 这块面板是半透明的，
   线太重会把玻璃割成一条条；淡到这个程度刚好帮着对行，又不抢眼。
   深色下用一层很淡的白（黑线压在深色底上等于没有）。 */
.vip-row-divider {
	border-bottom: 1px solid rgba(0, 0, 0, .04)
}

html.dark .vip-row-divider {
	border-bottom-color: rgba(255, 255, 255, .06)
}

/* ----- VIP 页：套餐卡 ----- */
.vip-tier {
	background: var(--glass);
	border-radius: 16px;
	padding: 28px 20px;
	text-align: center;
	box-shadow: var(--shadow-sm)
}

/* 三档只用一个强调色（站内金）：靠**徽章 + 金色标题 + 放大 + 更实的投影**分级。
   原来还给每档描了一圈边框，但站里其他地方的内容面板（详情页 / 工具页）都是无边框的，
   所以这三张也去掉了 —— 颜色和缩放已经够区分。
   年卡：金色标题；终身：金色标题 + 「最划算」徽章 + 放大 5% + 更大的投影。 */
.vip-tier--life {
	box-shadow: var(--shadow-md);
	transform: scale(1.05)
}

.vip-tier-badge {
	display: inline-block;
	background: var(--gold);
	color: #fff;
	font-size: 12px;
	padding: 4px 12px;
	border-radius: 12px;
	margin-bottom: 8px
}

.vip-tier-title {
	font-size: 20px;
	margin-bottom: 8px;
	color: var(--ink)
}

.vip-tier--year .vip-tier-title,
.vip-tier--life .vip-tier-title {
	color: var(--gold-text)
}

.vip-body {
	font-size: 14px;
	line-height: 1.6;
	color: var(--text)
}

.vip-h2 {
	font-size: 24px;
	margin-bottom: 8px
}

.vip-sub {
	font-size: 14px;
	color: var(--muted);
	margin-bottom: 16px
}

.vip-price {
	font-size: 36px;
	font-weight: bold;
	margin-bottom: 4px;
	color: var(--text)
}

.vip-note {
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 20px
}

/* 划线原价：跟现价同一行、比现价小一号（只在特惠档显示，见 page-vip.php 的 $xianer_origin） */
.vip-origin {
	font-size: 15px;
	font-weight: 400;
	color: var(--muted);
	margin-right: 8px;
	vertical-align: 4px;
	text-decoration-thickness: 1.5px
}

/* 限时优惠倒计时：放在套餐卡下面，**纯文字不套底衬**（不要背景），只有金色时间和小标签做强调 */
.vip-flash {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 640px;
	margin: -22px auto 28px;   /* 套餐卡那段本来就有 40px 下边距，往上收一点，别空出一大截 */
	font-size: 14px;
	color: var(--text)
}

.vip-flash-tag {
	background: var(--gold);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 4px 10px;
	border-radius: 999px
}

.vip-flash-time {
	font-size: 17px;
	font-weight: 700;
	color: var(--gold-text);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em
}

/* 「立即开通」按钮：颜色不再由 PHP 传行内值（原来三档三种色 + 写死白字）。
   普通档用站内主色，只有「最划算」那档用金色；深色模式靠 token 自动切换：
   浅色下 --brand 是黑、--warn-text 是白，深色下反过来，两种模式都能读。 */
.vip-buy {
	display: inline-block;
	padding: 12px 32px;
	border: none;
	border-radius: 24px;
	background: var(--brand);
	color: var(--warn-text);
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s var(--ease), filter .18s var(--ease)
}

.vip-buy:hover {
	filter: brightness(.94);
	transform: translateY(-1px)
}

.vip-buy:active {
	transform: translateY(0)
}

/* 金色底 + 深字（白字在金底上只有 2.8:1） */
.vip-buy--life {
	background: var(--gold);
	color: #111116
}

.vip-recharge-row {
	margin-top: 10px
}

.vip-recharge-link {
	font-size: 12px;
	color: var(--muted);
	text-decoration: none
}

.vip-recharge-link:hover {
	color: var(--gold-text)
}

/* VIP 页手机端：原来是 [style*="border-radius: 16px"] 这种按行内样式文本匹配的写法
   （行内样式一改就失效），现在直接打在类上。 */
@media (max-width: 768px) {
	.vip-tier {
		padding: 16px 8px;
		transform: none
	}

	.vip-tier--life {
		transform: none
	}

	.vip-tier-title {
		font-size: 15px
	}

	.vip-price {
		font-size: 24px
	}

	.vip-origin {
		font-size: 12px;
		margin-right: 5px;
		vertical-align: 2px
	}

	.vip-flash {
		gap: 6px;
		font-size: 12px;
		margin-bottom: 20px
	}

	.vip-flash-time {
		font-size: 14px
	}

	.vip-note,
	.vip-sub {
		font-size: 11px;
		margin-bottom: 10px
	}

	.vip-tier-badge {
		padding: 8px 14px;
		font-size: 12px
	}
}

/* ----- 付款确认弹层 -----
   这是真正的浮层，用遮罩和投影跟页面分层；不做边框，也不使用背景模糊。
   支付方式靠整块底色变化表示选中，手机上从底部展开，方便单手确认。 */
body.vip-pay-open {
	overflow: hidden
}

/* 用户中心 / PWA 返回按钮是页面级固定悬浮层；开付款弹层时先收起，
   避免它们在手机底部穿透遮罩、压到付款说明和按钮上。 */
body.vip-pay-open .user-entry,
body.vip-pay-open .global-back-btn,
body.vip-pay-open .xa2hs {
	opacity: 0;
	pointer-events: none
}

.vip-pay-modal[hidden] {
	display: none
}

.vip-pay-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	padding: 20px
}

.vip-pay-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 8, 12, .68)
}

.vip-pay-dialog {
	position: relative;
	width: min(100%, 440px);
	max-height: min(720px, calc(100vh - 40px));
	overflow: auto;
	padding: 28px;
	border-radius: 22px;
	background: var(--card);
	color: var(--text);
	box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
	animation: vip-pay-in .2s var(--ease)
}

@keyframes vip-pay-in {
	from {
		opacity: 0;
		transform: translateY(16px) scale(.98)
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1)
	}
}

.vip-pay-close {
	position: absolute;
	top: 16px;
	right: 16px;
	padding: 7px 12px;
	border: 0;
	border-radius: 999px;
	background: var(--bg);
	color: var(--muted);
	font: inherit;
	font-size: 12px;
	cursor: pointer
}

.vip-pay-dialog h2 {
	margin: 0 62px 8px 0;
	color: var(--ink);
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: -.02em
}

.vip-pay-intro {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 22px;
	color: var(--muted);
	font-size: 15px
}

.vip-pay-intro strong {
	color: var(--ink);
	font-size: 28px;
	letter-spacing: -.02em
}

.vip-pay-methods {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0
}

.vip-pay-methods legend {
	margin-bottom: 10px;
	padding: 0;
	color: var(--ink);
	font-size: 14px;
	font-weight: 700
}

.vip-pay-method {
	position: relative;
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 14px;
	border-radius: 14px;
	background: var(--bg);
	cursor: pointer;
	transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease)
}

.vip-pay-method:hover {
	transform: translateY(-1px)
}

.vip-pay-method input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none
}

.vip-pay-method.is-selected {
	background: var(--brand);
	color: var(--warn-text)
}

.vip-pay-method.is-disabled {
	opacity: .55;
	cursor: not-allowed
}

.vip-pay-method.is-disabled:hover {
	transform: none
}

.vip-pay-mark {
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	border-radius: 10px;
	background: transparent;
	overflow: hidden
}

.vip-pay-mark img {
	display: block;
	width: 30px;
	height: 30px;
	object-fit: contain
}

.vip-pay-mark--points {
	background: var(--gold);
	color: #111116;
	font-size: 17px;
	font-weight: 700
}

.vip-pay-points-status {
	padding: 5px 9px;
	border-radius: 999px;
	background: rgba(201, 148, 46, .14);
	color: var(--gold-text);
	font-size: 11px;
	white-space: nowrap
}

.vip-pay-method-copy {
	display: grid;
	gap: 3px
}

.vip-pay-method-copy strong {
	font-size: 15px
}

.vip-pay-method-copy small {
	opacity: .64;
	font-size: 12px
}

.vip-pay-check {
	display: none;
	font-size: 18px;
	font-weight: 700
}

.vip-pay-method.is-selected .vip-pay-check {
	display: inline
}

.vip-pay-unavailable {
	padding: 5px 9px;
	border-radius: 999px;
	background: rgba(128, 128, 128, .14);
	font-size: 11px;
	white-space: nowrap
}

.vip-pay-note {
	margin: 18px 0;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--bg)
}

.vip-pay-note p {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.65
}

.vip-pay-note p + p {
	margin-top: 4px
}

.vip-pay-actions {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: 10px
}

.vip-pay-cancel,
.vip-pay-confirm {
	min-height: 46px;
	padding: 11px 18px;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer
}

.vip-pay-cancel {
	background: var(--bg);
	color: var(--text)
}

.vip-pay-confirm {
	background: var(--gold);
	color: #111116
}

.vip-pay-confirm:disabled,
.vip-pay-cancel:disabled {
	opacity: .58;
	cursor: wait
}

.vip-pay-cancel:focus-visible,
.vip-pay-confirm:focus-visible,
.vip-pay-close:focus-visible,
.vip-pay-method:has(input:focus-visible) {
	outline: 3px solid rgba(201, 148, 46, .55);
	outline-offset: 3px
}

@media (max-width: 560px) {
	.vip-pay-modal {
		align-items: end;
		padding: 0
	}

	.vip-pay-dialog {
		width: 100%;
		max-height: 88vh;
		padding: 24px 18px calc(18px + env(safe-area-inset-bottom));
		border-radius: 22px 22px 0 0;
		animation-name: vip-pay-up
	}

	@keyframes vip-pay-up {
		from {
			opacity: .4;
			transform: translateY(100%)
		}
		to {
			opacity: 1;
			transform: translateY(0)
		}
	}

	.vip-pay-dialog h2 {
		font-size: 21px
	}

	.vip-pay-intro strong {
		font-size: 24px
	}
}

@media (prefers-reduced-motion: reduce) {
	.vip-pay-dialog,
	.vip-pay-method {
		animation: none;
		transition: none
	}
}