/**
 * /vip/ 会员开通页（templates/vip.php）
 *
 * 独立 CSS：此页不进 React 主包，避免为它跑一次构建。
 * 视觉来自 Pencil「暖橙动态玻璃」。支付卡 / 文案卡在 vip-card.css。
 */

.mytheme-membership-vip-pay {
	position: fixed;
	inset: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	box-sizing: border-box;
}

.mytheme-membership-vip-pay[hidden] {
	display: none !important;
}

.mytheme-membership-vip .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ===== 独立页：藏全站壳，铺暖橙底 ===== */

body.mytheme-membership-vip-page {
	background: #fff;
	overflow-x: hidden;
}

body.mytheme-membership-vip-page .app-sidebar,
body.mytheme-membership-vip-page .mytheme-page-main > header,
body.mytheme-membership-vip-page .mytheme-site-footer,
body.mytheme-membership-vip-page #mount-post-panel,
body.mytheme-membership-vip-page #aicore-floating-root,
body.mytheme-membership-vip-page .aicore-fab {
	display: none !important;
}

body.mytheme-membership-vip-page .mytheme-page-shell,
body.mytheme-membership-vip-page .mytheme-page-main {
	display: block;
	width: 100%;
	min-height: 100vh;
	background: transparent;
}

body.mytheme-membership-vip-page .mytheme-page-main > main {
	display: block;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 0;
	box-sizing: border-box;
	position: relative;
	overflow: visible;
}

body.admin-bar.mytheme-membership-vip-page .mytheme-page-main > main {
	min-height: calc(100vh - 32px);
	min-height: calc(100dvh - 32px);
}

/* ===== 背景光（纯装饰） ===== */

.mytheme-membership-vip-glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
	/* 暖色锁在中间，四边淡回页面底色，页底才不会和常见问题硬切 */
	-webkit-mask-image: radial-gradient(ellipse 76% 68% at 50% 46%, #000 0%, #000 40%, transparent 100%);
	mask-image: radial-gradient(ellipse 76% 68% at 50% 46%, #000 0%, #000 40%, transparent 100%);
}

.mytheme-membership-vip-glow__orb {
	position: absolute;
	border-radius: 50%;
	background-repeat: no-repeat;
	transform: rotate(7deg);
}

.mytheme-membership-vip-glow__orb--wide {
	left: 6%;
	top: 18%;
	width: 88%;
	height: 62%;
	background-image: radial-gradient(ellipse 50% 50% at 50% 50%, #ff9a367d 0%, #ffb15a50 58%, #ffd2a000 100%);
	filter: blur(46px);
	animation: mytheme-membership-vip-flow-wide 11s ease-in-out infinite;
}

.mytheme-membership-vip-glow__orb--core {
	left: 18%;
	top: 36%;
	width: 64%;
	height: 48%;
	background-image: radial-gradient(ellipse 50% 50% at 50% 50%, #ff4328d6 0%, #ff572dbd 56%, #ff8f455c 82%, #ffb87100 100%);
	filter: blur(43px);
	animation: mytheme-membership-vip-flow-core 9s ease-in-out infinite;
	animation-delay: -3s;
}

.mytheme-membership-vip-glow__veil {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 44%;
	background-image: linear-gradient(180deg, #fffffff2 0%, #fff9f49c 58%, #fff7f000 100%);
}

.mytheme-membership-vip-glow__band {
	position: absolute;
	left: 8%;
	width: 84%;
	height: 4.375rem;
	border-radius: 2.1875rem;
	filter: blur(15px);
	transform: rotate(8deg);
	animation: mytheme-membership-vip-drift 14s ease-in-out infinite alternate;
}

.mytheme-membership-vip-glow__band--1 {
	top: 16%;
	width: 90%;
	left: 4%;
	background-image: linear-gradient(-90deg, #ffffff00 0%, #ffb87032 48%, #ffffff00 100%);
	animation-duration: 16s;
}

.mytheme-membership-vip-glow__band--2 {
	top: 30%;
	width: 86%;
	left: 6%;
	background-image: linear-gradient(-90deg, #ffffff00 0%, #ff6b453d 48%, #ffffff00 100%);
	animation-duration: 13s;
	animation-delay: -3s;
}

.mytheme-membership-vip-glow__band--3 {
	top: 44%;
	width: 82%;
	left: 8%;
	background-image: linear-gradient(-90deg, #ffffff00 0%, #ffb87032 48%, #ffffff00 100%);
	animation-duration: 15s;
	animation-delay: -6s;
}

.mytheme-membership-vip-glow__band--4 {
	top: 58%;
	width: 78%;
	left: 10%;
	background-image: linear-gradient(-90deg, #ffffff00 0%, #ff6b453d 48%, #ffffff00 100%);
	animation-duration: 12s;
	animation-delay: -2s;
}

.mytheme-membership-vip-glow__band--5 {
	top: 72%;
	width: 74%;
	left: 12%;
	background-image: linear-gradient(-90deg, #ffffff00 0%, #ffb87032 48%, #ffffff00 100%);
	animation-duration: 17s;
	animation-delay: -8s;
}

@keyframes mytheme-membership-vip-drift {
	from {
		transform: translate3d(-18%, 0, 0) rotate(8deg);
	}

	to {
		transform: translate3d(18%, 0, 0) rotate(8deg);
	}
}

@keyframes mytheme-membership-vip-flow-wide {
	0% {
		transform: translate3d(-16%, -4%, 0) rotate(7deg) scale(0.94);
		background-position: 20% 30%;
	}

	50% {
		transform: translate3d(14%, 8%, 0) rotate(7deg) scale(1.08);
		background-position: 80% 70%;
	}

	100% {
		transform: translate3d(-16%, -4%, 0) rotate(7deg) scale(0.94);
		background-position: 20% 30%;
	}
}

@keyframes mytheme-membership-vip-flow-core {
	0% {
		transform: translate3d(18%, 6%, 0) rotate(7deg) scale(1.06);
		background-position: 75% 25%;
	}

	50% {
		transform: translate3d(-16%, -8%, 0) rotate(7deg) scale(0.92);
		background-position: 25% 80%;
	}

	100% {
		transform: translate3d(18%, 6%, 0) rotate(7deg) scale(1.06);
		background-position: 75% 25%;
	}
}

/* ===== 左上角：圆钮 pill 用 chrome-back.css，这里只定位 ===== */

.mytheme-membership-vip__back {
	position: fixed;
	top: 1.25rem;
	left: 1.25rem;
	z-index: 20;
}

body.admin-bar .mytheme-membership-vip__back {
	top: calc(1.25rem + 32px);
}

@media (max-width: 639px) {
	.mytheme-membership-vip__back {
		--kb-back-size: 44px;
		top: 1rem;
		left: 1rem;
	}

	body.admin-bar .mytheme-membership-vip__back {
		top: calc(1rem + 46px);
	}
}

/* ===== 滚动二次展开：下滑才让卡片右移、左侧文案渐显 ===== */

.mytheme-membership-vip-scroll {
	width: 100%;
}

.mytheme-membership-vip-stage {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 2.5rem 1rem 3rem;
	box-sizing: border-box;
}

body.admin-bar .mytheme-membership-vip-stage {
	min-height: calc(100vh - 32px);
	min-height: calc(100dvh - 32px);
}

/* 舞台 / 卡片：vip-card.css */

/* ===== 支付通道弹层（契约 class 名不能改） ===== */

.mytheme-membership-vip-pay__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(74, 17, 15, 0.28);
}

.mytheme-membership-vip-pay__panel {
	position: relative;
	z-index: 1;
	width: min(22rem, calc(100vw - 2rem));
	margin: 0;
	padding: 1.5rem;
	border-radius: 1.125rem;
	background: #fff;
	overscroll-behavior: contain;
}

.mytheme-membership-vip-pay__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	background: transparent;
	font-size: 24px;
	line-height: 1;
	color: #666;
	cursor: pointer;
}

.mytheme-membership-vip-pay__close:focus-visible {
	outline: 2px solid #111;
	outline-offset: 2px;
}

.mytheme-membership-vip-pay__title {
	margin: 0;
	padding: 0 2.75rem;
	font-size: 24px;
	line-height: 1.3;
	font-weight: 600;
	color: #222;
	text-align: center;
}

.mytheme-membership-vip-pay__sum {
	margin: 0.5rem 0 0;
	font-size: 16px;
	line-height: 1.5;
	color: #666;
	text-align: center;
}

.mytheme-membership-vip-pay__notice {
	margin: 1.25rem 0 0;
	font-size: 16px;
	font-weight: 330;
	line-height: 1.6;
	color: #666;
	text-align: center;
}

.mytheme-membership-vip-pay__channels {
	display: grid;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.mytheme-membership-vip-pay__channel {
	width: 100%;
	box-sizing: border-box;
	text-decoration: none;
}

.mytheme-membership-vip-pay__qr {
	display: flex;
	justify-content: center;
	margin-top: 1.25rem;
}

.mytheme-membership-vip-pay__qr svg {
	width: 200px;
	height: 200px;
}

.mytheme-membership-vip-pay__hint {
	margin: 0.75rem 0 0;
	min-height: 1.5rem;
	font-size: 14px;
	line-height: 1.5;
	color: #666;
}

@media (min-width: 1024px) and (min-height: 800px) {
	.mytheme-membership-vip-stage {
		padding: 1.75rem 1.25rem;
	}
}

@media (max-width: 639px) {
	.mytheme-membership-vip-glow__band--4,
	.mytheme-membership-vip-glow__band--5 {
		display: none;
	}

	.mytheme-membership-vip-glow__orb--wide,
	.mytheme-membership-vip-glow__orb--core {
		filter: blur(28px);
	}
}

/* 页底常见问题：必须在 .mytheme-membership-vip-scroll 外面。
   放进 sticky 舞台里会跟着二级文案一起漂到两张卡中间。 */
.mytheme-membership-vip-faq {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: 100%;
	padding: 4.5rem 1.5rem 5.5rem;
	background: #ffffff;
}

.mytheme-membership-vip-faq::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -10rem;
	height: 10rem;
	pointer-events: none;
	background: linear-gradient(180deg, rgb(255 255 255 / 0%), #fff 72%);
}

.mytheme-membership-vip-faq__title {
	margin: 0 0 2.5rem;
	font-size: 32px;
	line-height: 1.25;
	font-weight: 630;
	color: #222222;
	text-align: center;
}

.mytheme-membership-vip-faq .mytb-qa-block {
	width: min(40rem, 100%);
	margin: 0 auto;
	border: 0;
	border-radius: 0;
	background: transparent;
	overflow: visible;
}

.mytheme-membership-vip-faq .mytb-qa-head {
	display: none;
}

.mytheme-membership-vip-faq .mytb-qa-item {
	border-bottom: 1px solid #e5e5e5;
}

.mytheme-membership-vip-faq .mytb-qa-item:first-child {
	border-top: 1px solid #e5e5e5;
}

.mytheme-membership-vip-faq .mytb-qa-q {
	padding: 1.25rem 0;
	font-weight: 400;
}

.mytheme-membership-vip-faq .mytb-qa-q::after {
	border-color: #999999;
}

.mytheme-membership-vip-faq .mytb-qa-a {
	padding: 0 0 1.25rem;
	font-weight: 330;
	color: #666666;
}

@media (prefers-reduced-motion: reduce) {
	.mytheme-membership-vip-glow__band,
	.mytheme-membership-vip-glow__orb {
		animation: none;
	}
}