/**
 * Base frontend styles for the WAPV viewer container.
 *
 * View-mode specific styles (Flipbook 3D / Flat scroll) are added in
 * public/css/page-flip.css in a later stage.
 *
 * Package: WAPV
 */

.wapv-wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	border: 1px solid #ddd;
	background: #f5f5f5;
	overflow: hidden;
}

.wapv-wrapper * {
	box-sizing: border-box;
}

/* Toolbar */

.wapv-toolbar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 10px;
	background: #202124;
	color: #fff;
}

.wapv-toolbar-left,
.wapv-toolbar-center,
.wapv-toolbar-right {
	display: flex;
	align-items: center;
	gap: 6px;
}

.wapv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 8px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 3px;
	background: transparent;
	color: #fff;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

.wapv-btn:hover,
.wapv-btn:focus {
	background: rgba(255, 255, 255, 0.15);
}

.wapv-page-info {
	padding: 0 8px;
	font-size: 13px;
	white-space: nowrap;
}

/* Stage */

.wapv-stage {
	position: relative;
	flex: 1 1 auto;
	overflow: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e9e9e9;
}

.wapv-canvas-container {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Stage 5: smooth transform transition for the Zoom In/Out toolbar buttons. */
	transition: transform 0.15s ease-in-out;
}

.wapv-loading-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #666;
	font-size: 14px;
}

/* Lazy-load placeholder: shown on a .wapv-page / .wapv-flip-page whose
 * canvas hasn't been created/painted with real PDF content yet (empty
 * wrapper scaffolded upfront, canvas + content painted on demand as the
 * user scrolls/flips near it). Removed automatically once that page
 * renders. */
.wapv-page-pending {
	position: relative;
	background: #f0f0f0;
}

/* Flat mode only: before a page has a canvas at all, give its wrapper a
 * plausible placeholder height so scroll height / IntersectionObserver
 * geometry stay sane. Flipbook pages are sized by StPageFlip itself. */
.wapv-page.wapv-page-pending {
	min-height: 849px;
}

.wapv-page-pending canvas {
	opacity: 0;
}

.wapv-page-pending::after {
	content: 'Đang tải trang...';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #999;
	font-size: 13px;
	white-space: nowrap;
	pointer-events: none;
}

.wapv-error {
	color: #a52a2a;
	font-size: 14px;
	padding: 20px;
	text-align: center;
}

/* Stage 7: Flipbook "spine" (gáy sách) effect.
 * StPageFlip's own flip shadow (drawShadow/maxShadowOpacity) is only
 * drawn WHILE a page is actively being dragged/flipped — once a spread
 * settles, there is nothing marking the binding between the left/right
 * pages. We overlay a static center-gutter shadow so the book shape
 * reads correctly even at rest. StPageFlip adds a "--landscape" class to
 * its internal .stf__wrapper only when showing a genuine 2-page spread
 * (not in single-page/portrait/mobile mode), so the line never appears
 * where there is only one page on screen. (We also restate
 * position:relative on .stf__wrapper ourselves: the vendor library's own
 * stylesheet has a long-standing typo — ".sft__wrapper" instead of
 * ".stf__wrapper" — so its intended rule never actually applies.)
 */
.wapv-canvas-container .stf__wrapper {
	position: relative;
}

.wapv-canvas-container .stf__wrapper.--landscape::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 28px;
	height: 100%;
	margin-left: -14px;
	pointer-events: none;
	z-index: 40;
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.16) 38%,
		rgba(0, 0, 0, 0.3) 50%,
		rgba(0, 0, 0, 0.16) 62%,
		rgba(0, 0, 0, 0) 100%
	);
}

/* SEO Bot / Screen Reader fallback content.
 * Visually hidden (not display:none) so it stays in the DOM for
 * Googlebot and screen readers while never being visible to sighted users.
 */

.wapv-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.wapv-fallback-noscript {
	padding: 20px;
}

/* Responsive */

@media (max-width: 480px) {
	.wapv-page-info {
		font-size: 12px;
	}

	.wapv-btn {
		min-width: 26px;
		height: 26px;
		font-size: 13px;
	}
}