/**
 * youfang-lightbox —— 图集灯箱样式
 *
 * 全部类名以 .yfl 前缀，避免和主题既有样式（.mask / .bigimg / .imgmask）撞车；
 * z-index 取 200000：主题里最大的 z-index 是 .bigimg 的 99999。
 *
 * @package youfang-lightbox
 */

/* 正文图片的「可放大」光标：由 JS 给**确实会被接管**的图片加 class，
   带链接的图片不会拿到这个 class，因此光标也不会骗人。 */
.yfl-zoomable {
	cursor: zoom-in;
}

html.yfl-open,
html.yfl-open body {
	overflow: hidden !important;
}

.yfl {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 200000;
	display: none;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
	-webkit-text-size-adjust: 100%;
}

.yfl.is-open {
	display: block;
}

.yfl *,
.yfl *::before,
.yfl *::after {
	box-sizing: border-box;
}

.yfl-backdrop {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.92);
	animation: yfl-fade 0.18s ease;
}

/**
 * 舞台用「保留带」布局：上下左右都留出空间，图片永远待在中间那块里，
 * 因此图注与缩略图条**永远不会压到图上**（这是第一版用 max-height:80vh +
 * 绝对定位图注时会出现的毛病：图注叠在图片下沿上）。
 *
 * 百分比高度能生效的前提是每一层都有确定的尺寸：
 *   .yfl（fixed + inset:0）→ .yfl-stage（absolute + inset:0 + padding）
 *   → .yfl-canvas（width/height:100%）→ .yfl-img（max-width/height:100%）
 */
.yfl-stage {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	overflow: hidden;
	/* 上：计数 / 关闭按钮；左右：翻页按钮；下：图注（+ 缩略图条） */
	padding: 66px 84px 60px;
	/* 关掉浏览器自身的手势（下拉刷新、双指缩放整页、边缘返回），
	   翻页/捏合全部由脚本接管，否则 touchmove 里的 preventDefault 会被忽略。 */
	touch-action: none;
}

.yfl.has-thumbs .yfl-stage {
	padding-bottom: 176px;
}

.yfl-canvas {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.yfl-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	background: #111;
	box-shadow: 0 10px 44px rgba(0, 0, 0, 0.65);
	transform: translate3d(0, 0, 0) scale(1);
	transform-origin: center center;
	transition: opacity 0.18s ease, transform 0.16s ease;
	will-change: transform;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	-webkit-tap-highlight-color: transparent;
	opacity: 1;
}

.yfl-img.is-loading {
	opacity: 0.25;
}

.yfl-img.is-zoomed {
	cursor: grab;
}

.yfl-img.is-dragging {
	cursor: grabbing;
	transition: none;
}

/* ── 载入指示 ────────────────────────────────────────────────────────── */
.yfl-loading {
	position: absolute;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	left: 50%;
	top: 50%;
	border: 2px solid rgba(255, 255, 255, 0.25);
	border-top-color: #fff;
	border-radius: 50%;
	display: none;
	animation: yfl-spin 0.8s linear infinite;
	pointer-events: none;
}

.yfl.is-loading .yfl-loading {
	display: block;
}

/* ── 按钮 ────────────────────────────────────────────────────────────── */
.yfl-btn {
	position: absolute;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background 0.15s ease, opacity 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.yfl-btn:hover,
.yfl-btn:focus {
	background: rgba(255, 255, 255, 0.3);
}

.yfl-btn:focus-visible {
	outline: 2px solid #59a6ff;
	outline-offset: 2px;
}

.yfl-btn[disabled] {
	opacity: 0.25;
	cursor: default;
	background: rgba(255, 255, 255, 0.08);
}

.yfl-btn svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.yfl-prev {
	left: 22px;
	top: 50%;
	margin-top: -23px;
}

.yfl-next {
	right: 22px;
	top: 50%;
	margin-top: -23px;
}

.yfl-close {
	top: 18px;
	right: 18px;
}

/* ── 计数 / 图注 ─────────────────────────────────────────────────────── */
.yfl-counter {
	position: absolute;
	z-index: 4;
	left: 22px;
	top: 26px;
	padding: 5px 12px;
	border-radius: 14px;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 0.06em;
	pointer-events: none;
}

.yfl-caption {
	position: absolute;
	z-index: 4;
	left: 50%;
	bottom: 18px;
	max-width: 74vw;
	margin: 0;
	padding: 0 10px;
	transform: translateX(-50%);
	color: #eaeaea;
	font-size: 14px;
	line-height: 1.55;
	text-align: center;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
	pointer-events: none;
	overflow: hidden;
}

.yfl.has-thumbs .yfl-caption {
	bottom: 108px;
}

/* ── 缩略图条 ────────────────────────────────────────────────────────── */
.yfl-thumbs {
	position: absolute;
	z-index: 4;
	left: 0;
	right: 0;
	bottom: 0;
	height: 96px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 16px;
	overflow-x: auto;
	overflow-y: hidden;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0));
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
	/* 缩略图条要能横向滑动，且不把滑动传给舞台的翻页逻辑 */
	touch-action: pan-x;
}

.yfl-thumb {
	flex: 0 0 auto;
	width: 74px;
	height: 74px;
	padding: 0;
	margin: 0;
	border: 2px solid transparent;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.06);
	overflow: hidden;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.15s ease, border-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.yfl-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.yfl-thumb:hover {
	opacity: 1;
}

.yfl-thumb.is-active {
	opacity: 1;
	border-color: #fff;
}

/* ── 动画 ────────────────────────────────────────────────────────────── */
@keyframes yfl-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

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

/* ── 手机 ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	/* 手机上图片几乎占满宽度，靠按钮的半透明底做可读性 */
	.yfl-stage {
		padding: 58px 10px 52px;
	}

	.yfl.has-thumbs .yfl-stage {
		padding-bottom: 152px;
	}

	.yfl-btn {
		width: 40px;
		height: 40px;
		background: rgba(255, 255, 255, 0.18);
	}

	.yfl-btn svg {
		width: 19px;
		height: 19px;
	}

	.yfl-prev {
		left: 8px;
		margin-top: -20px;
	}

	.yfl-next {
		right: 8px;
		margin-top: -20px;
	}

	.yfl-close {
		top: 12px;
		right: 12px;
	}

	.yfl-counter {
		left: 14px;
		top: 18px;
	}

	.yfl-caption {
		max-width: 92vw;
		font-size: 13px;
	}

	.yfl.has-thumbs .yfl-caption {
		bottom: 84px;
	}

	.yfl-thumbs {
		height: 76px;
		padding: 0 10px;
		gap: 6px;
	}

	.yfl-thumb {
		width: 58px;
		height: 58px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.yfl-backdrop,
	.yfl-img,
	.yfl-btn,
	.yfl-thumb {
		animation: none !important;
		transition: none !important;
	}

	.yfl-loading {
		animation-duration: 1.6s;
	}
}

@media print {
	.yfl {
		display: none !important;
	}
}