/* ---- Viewer (Real3D-style: light stage, centred book, floating toolbar) ---- */
.epaper-flipbook {
	position: relative;
	width: 100%;
	background: #dddddd;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	-webkit-user-select: none;
	user-select: none;
}

/* Fill the screen in native fullscreen, overriding any inline height. */
.epaper-flipbook:fullscreen,
.epaper-flipbook:-webkit-full-screen,
.epaper-flipbook:-ms-fullscreen {
	width: 100% !important;
	height: 100% !important;
	background: #dddddd;
}

/* Fallback "pseudo fullscreen" for browsers without the Fullscreen API (iOS). */
.epaper-flipbook.epaper-pseudo-fs {
	position: fixed !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 2147483647 !important;
}

.epaper-stage {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: transform 0.2s ease;
}

.epaper-book {
	margin: 0 auto;
}

.epaper-page {
	background: #fff;
	overflow: hidden;
	box-shadow: 0 6px 22px rgba( 0, 0, 0, 0.28 );
}

.epaper-page canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---- Floating pill toolbar ---- */
.epaper-toolbar {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX( -50% );
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 6px 10px;
	background: rgba( 50, 55, 60, 0.92 );
	border-radius: 40px;
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.35 );
	z-index: 10;
	max-width: calc( 100% - 24px );
	flex-wrap: wrap;
	justify-content: center;
}

.epaper-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: #fff;
	border: 0;
	border-radius: 50%;
	width: 38px;
	height: 38px;
	padding: 0;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.epaper-btn:hover,
.epaper-btn.is-active {
	background: rgba( 255, 255, 255, 0.18 );
	color: #fff;
}

.epaper-btn svg {
	pointer-events: none;
}

/* Selectable text layer (overlaid on each page) */
.epaper-textlayer {
	position: absolute;
	inset: 0;
	overflow: hidden;
	line-height: 1;
	text-align: initial;
	transform-origin: 0 0;
	z-index: 3;
	pointer-events: none;
	--scale-factor: 1;
}

.epaper-textlayer span,
.epaper-textlayer br {
	color: transparent;
	position: absolute;
	white-space: pre;
	cursor: text;
	transform-origin: 0 0;
	pointer-events: auto;
}

.epaper-textlayer ::selection { background: rgba( 29, 62, 147, 0.35 ); }
.epaper-textlayer ::-moz-selection { background: rgba( 29, 62, 147, 0.35 ); }

/* Floating "Read selection" button */
.epaper-selbtn {
	position: fixed;
	z-index: 60;
	display: none;
	align-items: center;
	gap: 6px;
	background: #1d3e93;
	color: #fff;
	border: 0;
	border-radius: 30px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba( 20, 23, 80, 0.4 );
}

.epaper-selbtn.is-visible { display: inline-flex; }
.epaper-selbtn svg { width: 16px; height: 16px; }

/* Toast for read-aloud notices */
.epaper-toast {
	position: absolute;
	left: 50%;
	bottom: 78px;
	transform: translateX( -50% ) translateY( 10px );
	max-width: min( 480px, calc( 100% - 32px ) );
	background: rgba( 20, 23, 80, 0.94 );
	color: #fff;
	font-size: 14px;
	line-height: 1.45;
	padding: 12px 16px;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.35 );
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	z-index: 20;
	text-align: center;
}

.epaper-toast.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateX( -50% ) translateY( 0 );
}

/* Read-aloud voice/speed settings popover */
.epaper-ttspanel {
	position: absolute;
	left: 50%;
	bottom: 78px;
	transform: translateX( -50% );
	width: min( 320px, calc( 100% - 24px ) );
	background: #fff;
	color: #1a1a2e;
	border-radius: 12px;
	box-shadow: 0 14px 36px rgba( 0, 0, 0, 0.4 );
	padding: 14px;
	z-index: 21;
}

.epaper-ttspanel[hidden] { display: none; }

.epaper-ttsrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.epaper-ttsrow:last-child { margin-bottom: 0; }

.epaper-ttsrow label {
	font-size: 14px;
	font-weight: 600;
	color: #33344a;
	flex: 0 0 auto;
}

.epaper-ttsrow select {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 220px;
	height: 34px;
	border: 1px solid #d8deea;
	border-radius: 8px;
	background: #fff;
	color: #1a1a2e;
	font-size: 14px;
	padding: 0 8px;
}

/* Read-aloud button: highlight + gentle pulse while active */
.epaper-btn-listen.is-active {
	background: #4aa3ff;
	color: #fff;
	animation: epaper-pulse 1.4s ease-in-out infinite;
}

@keyframes epaper-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba( 74, 163, 255, 0.6 ); }
	50% { box-shadow: 0 0 0 6px rgba( 74, 163, 255, 0 ); }
}

/* Download button with a count badge */
.epaper-btn-dl {
	width: auto;
	gap: 5px;
	padding: 0 12px;
	border-radius: 19px;
}

.epaper-btn-dl .epaper-dlcount {
	font-size: 13px;
	font-weight: 600;
	color: #fff;
}

.epaper-sep {
	width: 1px;
	align-self: stretch;
	margin: 6px 6px;
	background: rgba( 255, 255, 255, 0.22 );
}

.epaper-pagebox {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #fff;
	font-size: 13px;
	padding: 0 6px;
}

.epaper-pageinput {
	width: 38px;
	height: 26px;
	text-align: center;
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	border-radius: 4px;
	background: rgba( 0, 0, 0, 0.25 );
	color: #fff;
	font-size: 13px;
}

.epaper-pageinput:focus {
	outline: none;
	border-color: rgba( 255, 255, 255, 0.6 );
}

.epaper-pagesep { opacity: 0.6; }
.epaper-pagetotal { min-width: 14px; text-align: left; }

/* ---- Thumbnails strip (slides up above the toolbar) ---- */
.epaper-thumbs {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 132px;
	display: flex;
	gap: 10px;
	padding: 12px 14px 16px;
	overflow-x: auto;
	overflow-y: hidden;
	background: rgba( 30, 33, 36, 0.95 );
	transform: translateY( 100% );
	transition: transform 0.25s ease;
	z-index: 9;
	scrollbar-width: thin;
}

.epaper-thumbs.is-open {
	transform: translateY( 0 );
}

.epaper-thumb {
	flex: 0 0 auto;
	height: 100%;
	background: #fff;
	border: 2px solid transparent;
	border-radius: 2px;
	cursor: pointer;
	position: relative;
}

.epaper-thumb.is-current { border-color: #4aa3ff; }

.epaper-thumb canvas {
	display: block;
	height: 100%;
	width: auto;
}

.epaper-thumb-num {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	font-size: 10px;
	text-align: center;
	color: #fff;
	background: rgba( 0, 0, 0, 0.55 );
}

/* ---- Loading spinner ---- */
.epaper-loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.epaper-spinner {
	width: 38px;
	height: 38px;
	border: 4px solid rgba( 50, 55, 60, 0.25 );
	border-top-color: #32373c;
	border-radius: 50%;
	animation: epaper-spin 0.8s linear infinite;
}

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

/* ---- Locked / subscribers-only panel ---- */
.epaper-locked {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 420px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #2a2e33;
	background-size: cover;
	background-position: center top;
	overflow: hidden;
}

.epaper-locked::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba( 28, 31, 34, 0.82 );
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );
}

.epaper-locked-inner {
	position: relative;
	z-index: 1;
	max-width: 420px;
	text-align: center;
	color: #fff;
	padding: 32px 24px;
}

.epaper-locked-icon {
	color: #ffd24a;
	margin-bottom: 12px;
}

.epaper-locked-heading {
	margin: 0 0 8px;
	font-size: 22px;
	color: #fff;
}

.epaper-locked-message {
	margin: 0 0 22px;
	font-size: 15px;
	color: #c7ccd1;
	line-height: 1.5;
}

.epaper-locked-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.epaper-locked-btn {
	display: inline-block;
	padding: 11px 22px;
	border-radius: 6px;
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: rgba( 255, 255, 255, 0.16 );
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	transition: background 0.15s ease;
}

.epaper-locked-btn:hover { background: rgba( 255, 255, 255, 0.28 ); color: #fff; }

.epaper-locked-btn-primary {
	background: #ffd24a;
	border-color: #ffd24a;
	color: #222;
}

.epaper-locked-btn-primary:hover { background: #ffc21a; color: #222; }

.epaper-buy-form { margin: 0; }

.epaper-locked-notice {
	margin: 0 0 16px;
	font-size: 14px;
	color: #ffe6a3;
	background: rgba( 255, 255, 255, 0.08 );
	border: 1px solid rgba( 255, 210, 74, 0.4 );
	border-radius: 6px;
	padding: 8px 12px;
}

/* ---- My Editions ---- */
.epaper-myeditions {
	margin: 0 0 24px;
}

.epaper-myeditions-note,
.epaper-myeditions-empty {
	font-size: 15px;
	margin: 0 0 18px;
}

.epaper-myeditions-empty {
	color: #666;
}

/* ---- Immersive single (detail) page ---- */
.epaper-single {
	width: 100%;
}

.epaper-single-bar {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 20px;
	background: #32373c;
	color: #fff;
	flex-wrap: wrap;
}

.epaper-back {
	color: #cfd6dd;
	text-decoration: none;
	font-size: 14px;
	white-space: nowrap;
}

.epaper-back:hover { color: #fff; }

.epaper-single-title {
	margin: 0;
	font-size: 20px;
	line-height: 1.2;
	color: #fff;
	flex: 1 1 auto;
}

.epaper-single-date {
	font-size: 13px;
	color: #aeb6bd;
	white-space: nowrap;
}

.epaper-single-viewer {
	height: 82vh;
	min-height: 480px;
	width: 100%;
	background: #dddddd;
}

.epaper-single-viewer .epaper-fill {
	height: 100% !important;
}

.epaper-single-desc {
	max-width: 820px;
	margin: 24px auto;
	padding: 0 20px;
}

/* ---- Archive / library grid ---- */
.epaper-archive-wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 16px;
}

/* Category filter bar */
.epaper-filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 22px;
}

.epaper-filter {
	display: inline-block;
	padding: 7px 16px;
	border-radius: 30px;
	font-size: 14px;
	text-decoration: none;
	color: #333;
	background: #f0f0f0;
	border: 1px solid #e2e2e2;
	transition: background 0.15s ease, color 0.15s ease;
}

.epaper-filter:hover { background: #e4e4e4; color: #111; }

.epaper-filter.is-active {
	background: #32373c;
	border-color: #32373c;
	color: #fff;
}

.epaper-card-cat {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #32373c;
	background: #eef0f2;
	border-radius: 3px;
	padding: 2px 7px;
	margin-bottom: 6px;
}

.epaper-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
	gap: 22px;
}

.epaper-card {
	display: block;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 8px;
	overflow: hidden;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.epaper-card:hover {
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.12 );
	transform: translateY( -3px );
}

.epaper-card-thumb {
	aspect-ratio: 3 / 4;
	background: #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.epaper-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.epaper-card-placeholder {
	font-size: 22px;
	font-weight: 700;
	color: #b0b0b0;
	letter-spacing: 2px;
}

.epaper-card-body {
	padding: 12px 14px;
}

.epaper-card-title {
	font-size: 16px;
	margin: 0 0 4px;
	line-height: 1.3;
}

.epaper-card-date {
	font-size: 13px;
	color: #888;
	margin: 0;
}

.epaper-pagination {
	margin-top: 28px;
	text-align: center;
}

/* ============ Mobile (flipbook reader) ============ */
@media ( max-width: 600px ) {
	/* Keep the toolbar WRAPPING (not scrolling) so every control — including
	   Download — stays visible. Just trim and tidy it for small screens. */
	.epaper-toolbar {
		flex-wrap: wrap;
		justify-content: center;
		left: 8px;
		right: 8px;
		transform: none;
		max-width: none;
		bottom: 12px;
		padding: 6px 8px;
		gap: 3px;
	}

	/* Drop redundant first/last (prev/next + swipe cover it). */
	.epaper-btn[data-action="first"],
	.epaper-btn[data-action="last"] { display: none; }
	.epaper-sep { display: none; }

	/* Comfortable touch targets. */
	.epaper-btn { width: 40px; height: 40px; }
	.epaper-pageinput { height: 30px; }

	/* Thumbnails strip a touch shorter on phones. */
	.epaper-thumbs { height: 110px; }
}