/*
 * 会员组购买 - 前台样式
 * 跟随 keqing-master(LoliMeow) 主题：Bootstrap 5 变量、12~16px 圆角、
 * rgba(39,39,39,.08) 细边框、hover 轻微上浮
 */

.mgb-wrap {
	--mgb-radius: 14px;
	--mgb-border: 1px solid rgba(39, 39, 39, .13);
	/* 卡片内部的分割线：卡片描边可能是 2px 深色（跟随主题），
	   分割线不能跟着加粗，所以单独一套变量。
	   注意不能叫 --mgb-line —— paid.css / publish.css 里那个是「颜色」变量，
	   重名会让 border:1px solid var(--mgb-line) 展开成非法值，整条 border 直接失效 */
	--mgb-divider: 1px solid rgba(39, 39, 39, .1);
	--mgb-shadow: 0 4px 16px rgba(0, 0, 0, .04);
	--mgb-shadow-hover: 0 10px 28px rgba(0, 0, 0, .08);
	--mgb-color: var(--bs-primary, #4e9cff);
}

.mgb-wrap * {
	box-sizing: border-box;
}

.mgb-notice {
	border-radius: var(--mgb-radius);
	border: 0;
}

.mgb-section-title {
	font-size: 1.15rem;
	font-weight: 600;
	margin: 1.5rem 0 1rem;
}

/* ---------- 通用卡片 ---------- */
.mgb-box,
.mgb-card,
.mgb-status {
	border-radius: var(--mgb-radius);
	/* 不能加 !important：border 简写会把 :hover 里的 border-color 一起压掉，
	   会员组卡片 hover 变色就是这么丢的 */
	border: var(--mgb-border);
	box-shadow: var(--mgb-shadow);
	background: var(--bs-body-bg, #fff);
}

.mgb-box-title {
	font-size: .95rem;
	font-weight: 600;
	margin-bottom: 1rem;
	padding-bottom: .75rem;
	border-bottom: var(--mgb-divider, var(--mgb-border));
}

.mgb-btn {
	background: var(--mgb-color);
	border: 0;
	color: #fff;
	border-radius: 10px;
	font-weight: 500;
	padding: .5rem 1.1rem;
	transition: all .25s ease;
}

/*
 * Bootstrap 的 .btn 在各个状态下都会重写 background-color / color：
 *   .btn:hover            → var(--bs-btn-hover-bg)
 *   .btn:first-child:active → var(--bs-btn-active-bg)   ← 权重 0,3,0
 *   .btn:disabled         → var(--bs-btn-disabled-bg)
 * 裸 .btn（没有 .btn-primary 之类）这些变量都是空的，解析不出来就回落成透明，
 * 于是鼠标一移上去背景就没了，只剩我们的白字落在白卡片上 —— 看着像按钮消失。
 * 所以每个状态都要自己写死背景，并且用 .mgb-wrap 前缀把权重提到 0,3,0。
 */
.mgb-wrap .mgb-btn,
.mgb-wrap .mgb-btn:hover,
.mgb-wrap .mgb-btn:focus,
.mgb-wrap .mgb-btn:active,
.mgb-wrap .mgb-btn:disabled {
	background: var(--mgb-color);
	border-color: transparent;
	color: #fff;
}

.mgb-btn:hover,
.mgb-btn:focus {
	color: #fff;
	filter: brightness(1.08);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
	transform: translateY(-1px);
}

.mgb-btn:disabled {
	opacity: .55;
	transform: none;
	box-shadow: none;
	filter: none;
}

.mgb-empty-icon {
	font-size: 42px;
	color: rgba(39, 39, 39, .18);
}

/* ---------- 会员状态卡片 ---------- */
.mgb-status {
	margin-bottom: 1.5rem;
	overflow: hidden;
	position: relative;
}

.mgb-status.is-member::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: var(--mgb-color);
}

.mgb-status-avatar img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 2px solid rgba(var(--bs-primary-rgb, 78, 156, 255), .25);
}

.mgb-status-name {
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
}

.mgb-status-badge {
	background: var(--mgb-color);
	color: #fff;
	font-weight: 500;
	border-radius: 6px;
}

.mgb-status-sub {
	font-size: .85rem;
	color: var(--bs-secondary-color, #6c757d);
	margin-top: .25rem;
}

.mgb-status-quota {
	font-size: .82rem;
	color: var(--bs-secondary-color, #6c757d);
	line-height: 1.7;
}

/* ---------- 会员组卡片 ---------- */
.mgb-card {
	position: relative;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.mgb-group-list .mgb-card:hover {
	transform: translateY(-4px);
	/* 中性投影，别用同色系 —— 彩色阴影在浅色卡片上很脏 */
	box-shadow: var(--mgb-shadow-hover);
	border-color: var(--mgb-color);
}

/* 推荐 / 当前档位常驻主题色描边（粗细跟卡片一致，只换颜色） */
.mgb-card-hot,
.mgb-card-current {
	border-color: var(--mgb-color);
}

.mgb-card-hot {
	box-shadow: 0 8px 24px rgba(0, 0, 0, .07);
}

.mgb-card-current {
	background: linear-gradient(180deg, rgba(0, 0, 0, .015), transparent);
}

.mgb-badge-hot {
	position: absolute;
	top: 0;
	right: 0;
	background: var(--mgb-color);
	color: #fff;
	font-size: .72rem;
	padding: .2rem .6rem;
	border-bottom-left-radius: 10px;
	z-index: 2;
}

.mgb-badge-cur {
	background: #19bfa0;
}

.mgb-level {
	line-height: 1;
}

.mgb-level img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 12px;
}

.mgb-level-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--mgb-color) 14%, transparent);
	color: var(--mgb-color);
	font-size: 24px;
}

/* 老浏览器回退：color-mix 不支持时用半透明底 */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.mgb-level-dot {
		background: rgba(78, 156, 255, .14);
	}
}

.mgb-desc {
	font-size: .8rem;
	color: var(--bs-secondary-color, #6c757d);
	min-height: 1.2em;
}

.mgb-price {
	line-height: 1.2;
}

.mgb-price del {
	display: block;
	font-size: .82rem;
	color: var(--bs-secondary-color, #9aa0a6);
}

.mgb-price-num {
	font-size: 2rem;
	font-weight: 700;
	color: var(--mgb-color);
}

.mgb-price-unit {
	font-size: .82rem;
	color: var(--bs-secondary-color, #6c757d);
}

.mgb-diff {
	font-size: .75rem;
	color: #ff8a3d;
	margin-top: .25rem;
}

.mgb-benefits {
	font-size: .86rem;
	text-align: left;
	margin-top: .75rem;
}

.mgb-benefits li {
	padding: .32rem 0;
	color: var(--bs-body-color, #2c3038);
	display: flex;
	align-items: flex-start;
	gap: .5rem;
}

.mgb-benefits li i {
	color: var(--mgb-color);
	margin-top: .22rem;
	font-size: .8rem;
}

/* ---------- 支付弹窗 ---------- */
.mgb-modal .modal-content {
	border-radius: 16px;
	overflow: hidden;
}

.mgb-modal .modal-header,
.mgb-modal .modal-footer {
	border-color: rgba(39, 39, 39, .08);
}

.mgb-order-sum {
	background: rgba(39, 39, 39, .03);
	border-radius: 12px;
	padding: .9rem 1rem;
	font-size: .9rem;
	line-height: 2;
}

.mgb-order-total {
	border-top: 1px dashed rgba(39, 39, 39, .14);
	margin-top: .4rem;
	padding-top: .4rem;
}

.mgb-order-total b {
	color: #ff5d5b;
	font-size: 1.15rem;
}

.mgb-pay-title {
	font-size: .85rem;
	font-weight: 600;
	margin: 1.1rem 0 .6rem;
}

.mgb-pay-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: .6rem;
}

.mgb-pay-item {
	margin: 0;
	cursor: pointer;
}

.mgb-pay-item input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.mgb-pay-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .2rem;
	padding: .75rem .5rem;
	border: 1px solid rgba(39, 39, 39, .12);
	border-radius: 12px;
	transition: all .2s ease;
	height: 100%;
	text-align: center;
}

.mgb-pay-box i {
	font-size: 20px;
	color: var(--bs-primary, #4e9cff);
}

.mgb-pay-name {
	font-size: .85rem;
	font-weight: 500;
}

.mgb-pay-box small {
	font-size: .7rem;
	color: var(--bs-secondary-color, #9aa0a6);
}

.mgb-pay-item input:checked + .mgb-pay-box {
	border-color: var(--bs-primary, #4e9cff);
	background: rgba(var(--bs-primary-rgb, 78, 156, 255), .06);
	box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb, 78, 156, 255), .12);
}

.mgb-pay-tip {
	margin-top: 1rem;
	font-size: .8rem;
	color: var(--bs-secondary-color, #6c757d);
}

/* ---------- 表格 ---------- */
.mgb-table {
	font-size: .85rem;
}

.mgb-table thead th {
	font-weight: 500;
	color: var(--bs-secondary-color, #6c757d);
	border-bottom: var(--mgb-divider, var(--mgb-border));
}

.mgb-table code {
	font-size: .78rem;
}

/* ---------- 暗色模式 ---------- */
@media (prefers-color-scheme: dark) {
	.mgb-wrap {
		--mgb-border: 1px solid rgba(255, 255, 255, .14);
		--mgb-divider: 1px solid rgba(255, 255, 255, .1);
		--mgb-shadow: 0 4px 16px rgba(0, 0, 0, .3);
		--mgb-shadow-hover: 0 10px 28px rgba(0, 0, 0, .45);
	}

	.mgb-order-sum,
	.mgb-quota-item,
	.mgb-batch-log {
		background: rgba(255, 255, 255, .04);
	}

	.mgb-pay-box {
		border-color: rgba(255, 255, 255, .14);
	}

	.mgb-mypost li {
		border-bottom-color: rgba(255, 255, 255, .07);
	}
}

/* 主题自带的 data-bs-theme=dark 也同步 */
[data-bs-theme="dark"] .mgb-wrap {
	--mgb-border: 1px solid rgba(255, 255, 255, .14);
	--mgb-divider: 1px solid rgba(255, 255, 255, .1);
}

[data-bs-theme="dark"] .mgb-order-sum,
[data-bs-theme="dark"] .mgb-quota-item,
[data-bs-theme="dark"] .mgb-batch-log {
	background: rgba(255, 255, 255, .04);
}

/* ---------- 移动端 ---------- */
@media (max-width: 767.98px) {
	.mgb-wrap {
		padding-left: 0;
		padding-right: 0;
	}

	.mgb-price-num {
		font-size: 1.7rem;
	}

	.mgb-pay-list {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	}
}