/* ============================================================
   nova 结算提交遮罩  v1.0.4
   位置的版本号：/themes/cart/nova/assets/checkout-loading.css?v=1.0.2
   作用：点「立即结账」后，页面正中显示旋转漩涡，告知正在开通
   ============================================================ */

.nv-checkout-mask {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(16, 28, 48, .42);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	padding: 20px;
}

.nv-checkout-mask.nv-show {
	display: flex;
}

.nv-checkout-box {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 22px 60px rgba(0, 20, 60, .28);
	padding: 34px 42px 28px;
	text-align: center;
	min-width: 280px;
	max-width: 90vw;
	animation: nvPop .2s ease-out both;
}

@keyframes nvPop {
	from {
		transform: translateY(6px) scale(.97);
	}

	to {
		transform: translateY(0) scale(1);
	}
}

/* 旋转漩涡 */
.nv-spinner {
	width: 54px;
	height: 54px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: conic-gradient(from 0deg,
			rgba(0, 100, 255, 0) 0deg,
			rgba(0, 100, 255, .15) 90deg,
			rgba(0, 100, 255, .55) 220deg,
			#0064ff 340deg,
			#0064ff 360deg);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	animation: nvSpin .85s linear infinite;
	will-change: transform;
}

@keyframes nvSpin {
	to {
		transform: rotate(360deg);
	}
}

/* 老浏览器兜底：不支持 mask/conic-gradient 时用双色圆环 */
@supports not (background: conic-gradient(#000, #000)) {
	.nv-spinner {
		background: none;
		border: 5px solid #e6eefc;
		border-top-color: #0064ff;
		border-right-color: #0064ff;
	}
}

.nv-checkout-title {
	font-size: 16px;
	font-weight: 700;
	color: #1f2a44;
	letter-spacing: .5px;
	margin: 0 0 8px;
}

.nv-checkout-sub {
	font-size: 13px;
	color: #7b8598;
	line-height: 1.7;
	margin: 0;
}

.nv-checkout-sub .nv-strong {
	color: #ff4d1f;
	font-weight: 600;
}

/* 按钮忙碌态 */
.btn.nv-busy {
	opacity: .75 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}

@media (max-width: 575.98px) {
	.nv-checkout-box {
		padding: 26px 26px 22px;
		min-width: 240px;
	}

	.nv-spinner {
		width: 46px;
		height: 46px;
	}

	.nv-checkout-title {
		font-size: 15px;
	}
}