/*
 * 资源详情页的「在线预览」
 *
 * 视觉对齐 yuanpu.cc/templates/<slug>：灰底圆角舞台 + 加载中遮罩 + 桌面/手机切换。
 * 全部选择器收在 .bbh-pv 之下 —— RiPro V5 带 Bootstrap 5，
 * 裸选择器会和 .btn/.card 之类互相污染。
 */

.bbh-pv {
	--bbh-pv-border: #e5e7eb;
	--bbh-pv-muted: #9ca3af;

	/* 预览窗口尺寸。参考站用的是固定 680px，太小了 —— 一个完整的模板首页
	   动辄七八千像素，680px 只能看到首屏一条，买家得在 iframe 里再滚一次。
	   用 vh 而不是 px，窗口就会随屏幕长高。要再调，只改这两处。

	   宽高都必须 !important：站上有个脚本（16:9 那套自适应嵌入）会给页内每个
	   iframe 写死行内 style="height:<宽×9/16>;width:100%"，把我们的 300vh
	   压成 499.5px。CSS 的 !important 优先于行内普通声明，所以这样才稳。
	   width 也走变量，设备切换才不会被它改回 100%。 */
	--bbh-pv-h: 300vh;
	--bbh-pv-w: 100%;

	margin: 0 0 2rem;
	font-size: 0.875rem;
}

/* --- 顶部工具条 ------------------------------------------------------- */

.bbh-pv-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.bbh-pv-name {
	font-weight: 700;
	color: #111827;
	margin-right: auto;
}

.bbh-pv-devices {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem;
	border: 1px solid var(--bbh-pv-border);
	border-radius: 9999px;
	background: #f9fafb;
}

.bbh-pv-dev {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.875rem;
	border: none;
	border-radius: 9999px;
	background: transparent;
	color: var(--bbh-pv-muted);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.bbh-pv-dev:hover {
	color: #374151;
}

.bbh-pv-dev.is-active {
	background: #fff;
	color: #111827;
	box-shadow: 0 1px 2px #00000014;
}

.bbh-pv-open {
	color: var(--bbh-pv-muted);
	font-size: 0.8125rem;
	text-decoration: none;
	white-space: nowrap;
}

.bbh-pv-open:hover {
	color: #111827;
	text-decoration: underline;
}

/* --- 舞台 ------------------------------------------------------------- */

.bbh-pv-stage {
	position: relative;
	display: flex;
	justify-content: center;
	min-height: var(--bbh-pv-h);
	background: #f3f4f6;
	border: 1px solid var(--bbh-pv-border);
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
}

/* 宽度切换的过渡 —— 参考站也是 0.3s（JS 只改宽度变量） */
.bbh-pv-frame {
	width: var(--bbh-pv-w, 100%) !important;
	max-width: 100%;
	height: var(--bbh-pv-h) !important;
	border: 0;
	background: #fff;
	transition: width 0.3s ease;
}

/* 加载遮罩：.is-loaded 之后淡出，但保留在 DOM 里（切设备不重新加载） */
.bbh-pv-load {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	background: #f3f4f6;
	color: #6b7280;
	transition: opacity 0.25s ease, visibility 0.25s;
}

.bbh-pv.is-loaded .bbh-pv-load {
	opacity: 0;
	visibility: hidden;
}

.bbh-pv-spin {
	width: 2rem;
	height: 2rem;
	border: 3px solid #d1d5db;
	border-top-color: #374151;
	border-radius: 50%;
	animation: bbh-pv-spin 0.8s linear infinite;
}

@keyframes bbh-pv-spin {
	to { transform: rotate(360deg); }
}

.bbh-pv-load p {
	margin: 0;
	font-size: 0.875rem;
}

/* 预览打不开时给一句话，别让买家对着一个永远转的圈 */
.bbh-pv-error .bbh-pv-spin {
	display: none;
}

@media screen and (max-width: 767px) {
	/* 手机上 300vh 意味着一块预览要滚三屏才能过去，收一点。 */
	.bbh-pv {
		--bbh-pv-h: 150vh;
	}

	/* 手机上「桌面」视图没有意义，隐藏切换器，直接铺满 */
	.bbh-pv-devices {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bbh-pv-spin { animation: none; }
	.bbh-pv-frame { transition: none; }
}