/**
 * OV RP增强设置 - 「游戏盲盒」侧边栏入口卡片
 *
 * 复刻 XDGAME 侧边栏 .sjmh 卡片的版式（居中大标题、浅色次级按钮、实心主按钮），
 * 并按 RiPro-V5 的视觉体系落地：
 *   - 卡片外壳由主题 `.sidebar .widget` 提供，这里不再叠加白底容器
 *   - 主色取主题主色 #3b6ff5；主按钮沿用主题与插件一致的 135deg 渐变 + 同色投影
 *   - 暗色模式对接主题的 [data-bs-theme="dark"]
 *
 * 选择器统一带 .ovrpe-blindbox 前缀，特异性高于主题的 `a` / `a:hover`，
 * 因此不需要 !important。
 */

.ovrpe-blindbox {
	--ovrpe-bb-primary: #3b6ff5;
	--ovrpe-bb-primary-dark: #335fd3;
	--ovrpe-bb-shadow: rgba(59, 111, 245, 0.35);
	--ovrpe-bb-soft-bg: rgba(59, 111, 245, 0.08);
	--ovrpe-bb-soft-bg-hover: rgba(59, 111, 245, 0.14);
	--ovrpe-bb-soft-border: rgba(59, 111, 245, 0.28);
	--ovrpe-bb-radius: 0.5rem;

	padding: 0.25rem 0 0.5rem;
	text-align: center;
}

/* ── 居中大标题（源站 20px / 700） ───────────────────────────── */

.ovrpe-blindbox .ovrpe-blindbox-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.45;
}

.ovrpe-blindbox .ovrpe-blindbox-entry {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.ovrpe-blindbox .ovrpe-blindbox-entry:hover,
.ovrpe-blindbox .ovrpe-blindbox-entry:focus {
	color: var(--ovrpe-bb-primary);
}

/* ── 按钮 ──────────────────────────────────────────────────── */

/* 源站次级按钮外层 .search 的上下留白 */
.ovrpe-blindbox .ovrpe-blindbox-search {
	margin: 1.25rem auto;
}

.ovrpe-blindbox .ovrpe-blindbox-ed,
.ovrpe-blindbox .ovrpe-blindbox-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.45rem 1.1rem;
	border: 1px solid transparent;
	border-radius: var(--ovrpe-bb-radius);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.6;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
		transform 0.2s ease, box-shadow 0.2s ease;
}

/* 浅色次级按钮（源站 .blindbox-ed-entry） */
.ovrpe-blindbox .ovrpe-blindbox-ed {
	background-color: var(--ovrpe-bb-soft-bg);
	border-color: var(--ovrpe-bb-soft-border);
	color: var(--ovrpe-bb-primary);
}

.ovrpe-blindbox .ovrpe-blindbox-ed:hover,
.ovrpe-blindbox .ovrpe-blindbox-ed:focus {
	background-color: var(--ovrpe-bb-soft-bg-hover);
	border-color: var(--ovrpe-bb-primary);
	color: var(--ovrpe-bb-primary-dark);
}

/* 实心主按钮（源站 .blindbox-entry-button） */
.ovrpe-blindbox .ovrpe-blindbox-button {
	padding: 0.55rem 1.75rem;
	background-color: var(--ovrpe-bb-primary);
	background-image: linear-gradient(135deg, var(--ovrpe-bb-primary), var(--ovrpe-bb-primary-dark));
	border-color: transparent;
	color: #fff;
	box-shadow: 0 4px 14px var(--ovrpe-bb-shadow);
}

.ovrpe-blindbox .ovrpe-blindbox-button:hover,
.ovrpe-blindbox .ovrpe-blindbox-button:focus {
	background-color: var(--ovrpe-bb-primary);
	background-image: linear-gradient(135deg, var(--ovrpe-bb-primary), var(--ovrpe-bb-primary-dark));
	border-color: transparent;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px var(--ovrpe-bb-shadow);
}

/* ── 键盘焦点可见 ──────────────────────────────────────────── */

.ovrpe-blindbox .ovrpe-blindbox-entry:focus-visible,
.ovrpe-blindbox .ovrpe-blindbox-ed:focus-visible,
.ovrpe-blindbox .ovrpe-blindbox-button:focus-visible {
	outline: 2px solid var(--ovrpe-bb-primary);
	outline-offset: 2px;
}

/* ── 暗色模式：对接 RiPro-V5 的 [data-bs-theme="dark"] ──────── */

[data-bs-theme="dark"] .ovrpe-blindbox {
	--ovrpe-bb-primary: #5b8cff;
	--ovrpe-bb-primary-dark: #3f6fe0;
	--ovrpe-bb-shadow: rgba(91, 140, 255, 0.32);
	--ovrpe-bb-soft-bg: rgba(91, 140, 255, 0.14);
	--ovrpe-bb-soft-bg-hover: rgba(91, 140, 255, 0.22);
	--ovrpe-bb-soft-border: rgba(91, 140, 255, 0.4);
}

/* ── 移动端：侧边栏变全宽，按钮铺满更好点按 ────────────────── */

@media (max-width: 575.98px) {
	.ovrpe-blindbox .ovrpe-blindbox-search {
		margin: 1rem auto;
	}

	.ovrpe-blindbox .ovrpe-blindbox-ed,
	.ovrpe-blindbox .ovrpe-blindbox-button {
		display: flex;
		width: 100%;
	}
}