/**
 * eSalesPage Secure Reader styles.
 *
 * Palette: strictly grey / black / white, per client branding.
 * Every interactive control (buttons, inputs, menu items) is written with
 * !important on the properties themes commonly force onto bare element
 * selectors (background, border-radius, padding, width…). The reader must
 * look identical under any theme — the client's theme styles every <button>
 * as a large pink pill, which otherwise hijacks the toolbar, the chapters
 * menu and the page-turn arrows.
 */

.esr-reader {
	--esr-bar: #1b1b1b;
	--esr-bar-text: #f2f2f2;
	--esr-stage: #e9e9e9;
	--esr-radius: 10px;

	display: block !important;
	position: relative !important; /* Anchors the overlay nav arrows and the chapters panel. */
	/* width:100% (not auto) so a flex-column theme wrapper can't shrink the
	   reader to its content width — auto margins would otherwise disable stretch. */
	width: 100% !important;
	max-width: 1035px !important; /* Book width; JS MAX_BOOK must match. */
	margin: 1.5rem auto !important;
	padding: 0 !important;
	border-radius: var(--esr-radius);
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
	background: var(--esr-stage);
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

/* Neutralise any theme box-sizing/width quirks inside the reader so the bar and
   the reading stage always resolve to the same width. */
.esr-reader,
.esr-reader *,
.esr-reader *::before,
.esr-reader *::after {
	box-sizing: border-box !important;
}

.esr-bar,
.esr-stage {
	width: 100% !important;
}

/* ---------- Toolbar ---------- */

.esr-bar {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 1rem;
	margin: 0 !important;
	padding: 0.6rem 0.9rem !important;
	background: var(--esr-bar) !important;
	color: var(--esr-bar-text) !important;
}

.esr-title {
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	color: var(--esr-bar-text) !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.esr-controls {
	display: flex !important;
	align-items: center !important;
	gap: 0.35rem !important;
	flex-shrink: 0;
}

/* Toolbar buttons: fixed dark squares with the glyph dead-centre, no matter
   what padding/line-height/radius the theme forces on <button>. */
.esr-controls button {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 2rem !important;
	height: 2rem !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: rgba(255, 255, 255, 0.1) !important;
	color: var(--esr-bar-text) !important;
	border: 0 !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	font-size: 1.05rem !important;
	line-height: 1 !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer !important;
	transition: background 0.15s ease !important;
}

.esr-controls button:hover {
	background: rgba(255, 255, 255, 0.28) !important;
	color: #fff !important;
}

.esr-controls button:focus-visible {
	outline: 2px solid #fff !important;
	outline-offset: 2px !important;
}

.esr-controls button:disabled {
	opacity: 0.35 !important;
	cursor: default !important;
}

/* Toolbar page counter. Its own class so it can't collide with the book's
   page slots (.esr-page), which are absolutely positioned. */
.esr-controls .esr-counter {
	min-width: 3.5rem;
	padding: 0 0.25rem !important;
	font-size: 0.85rem !important;
	color: var(--esr-bar-text) !important;
	text-align: center;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* "Page [   ] Go" jump box. */
.esr-goto {
	display: flex !important;
	align-items: center !important;
	gap: 0.25rem !important;
}

.esr-controls .esr-go {
	width: auto !important;
	padding: 0 0.6rem !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
}

.esr-controls .esr-jump {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 4.5rem !important;
	height: 2rem !important;
	margin: 0 !important;
	padding: 0 0.4rem !important;
	border: 0 !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	font-size: 0.9rem !important;
	line-height: 1 !important;
	text-align: center;
	background: #fff !important;
	color: #111 !important;
}

.esr-controls .esr-jump::-webkit-outer-spin-button,
.esr-controls .esr-jump::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

/* ---------- Chapters dropdown ---------- */

.esr-toc-panel {
	position: absolute !important;
	right: 0.5rem;
	z-index: 30;
	min-width: 300px;
	max-width: 92%;
	max-height: 65%;
	overflow: auto;
	margin: 0 !important;
	padding: 0 !important;
	background: #fff !important;
	border: 1px solid #ddd !important;
	border-top: 0 !important;
	border-radius: 0 0 10px 10px !important;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25) !important;
}

.esr-toc-panel .esr-toc-item {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: baseline !important;
	gap: 1rem !important;
	width: 100% !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0.55rem 0.9rem !important;
	background: #fff !important;
	border: 0 !important;
	border-bottom: 1px solid #eee !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #1a1a1a !important;
	font-size: 0.9rem !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer !important;
}

.esr-toc-panel .esr-toc-item:hover,
.esr-toc-panel .esr-toc-item:focus-visible {
	background: #efefef !important;
	color: #000 !important;
}

.esr-toc-panel .esr-toc-item:last-child {
	border-bottom: 0 !important;
}

.esr-toc-page {
	color: #888 !important;
	font-variant-numeric: tabular-nums;
}

/* ---------- Reading stage ---------- */

.esr-stage {
	position: relative;
	display: block !important;
	text-align: center;
	margin: 0 !important;
	padding: 1.75rem 1.25rem !important;
	overflow: auto;
	max-height: 85vh;
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.55), rgba(0, 0, 0, 0) 60%),
		var(--esr-stage) !important;
	perspective: 2400px;
}

/* The open book: two page-halves side by side, animated leaves layered on top.
   Fluid width (capped) and a centred block so it always fits its column and
   lines up under the toolbar; never overflows at 100% zoom. */
.esr-book {
	position: relative;
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 1035px;
	transform-style: preserve-3d;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

/* Central spine shadow so the two pages read as one bound book. */
.esr-book::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 40px;
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 4;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.16) 45%,
		rgba(0, 0, 0, 0.22) 50%,
		rgba(0, 0, 0, 0.16) 55%,
		rgba(0, 0, 0, 0) 100%
	);
}

/* Overlay page-turn arrows: dark neutral circles, dead-centre glyph. */
.esr-nav {
	-webkit-appearance: none !important;
	appearance: none !important;
	position: absolute !important;
	top: 50%;
	transform: translateY(-50%);
	z-index: 7;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(0, 0, 0, 0.55) !important;
	color: #fff !important;
	font-size: 1.7rem !important;
	line-height: 1 !important;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3) !important;
	cursor: pointer !important;
}

.esr-nav:hover {
	background: #000 !important;
	color: #fff !important;
}

.esr-nav-prev { left: 12px; }
.esr-nav-next { right: 12px; }

.esr-nav[disabled] {
	opacity: 0.25 !important;
	cursor: default !important;
	pointer-events: none;
}

/* ---------- Pages & the turning leaf ---------- */

.esr-page,
.esr-leaf {
	position: absolute;
	top: 0;
	height: 100%;
	width: 50%;
}

/* Static page slots may clip; the 3D leaf must NOT — overflow:hidden flattens
   the 3D context and would disable backface culling, showing a mirrored page. */
.esr-page {
	overflow: hidden;
	background: #fff;
}

.esr-page-left { left: 0; }
.esr-page-right { right: 0; }

.esr-page canvas,
.esr-leaf-face canvas {
	display: block;
	width: 100%;
	height: 100%;
	background: #fff;
}

.esr-page.esr-blank,
.esr-leaf-face.esr-blank {
	background: #f1f1f1;
}

/* A turning leaf: two stacked faces that flip about the spine. */
.esr-leaf {
	z-index: 5;
	transform-style: preserve-3d;
	transition: transform 0.72s cubic-bezier(0.2, 0.72, 0.24, 1);
}

.esr-leaf-fwd {
	right: 0;
	transform-origin: left center;
	transform: rotateY(0deg);
}

.esr-leaf-fwd.esr-turning {
	transform: rotateY(-180deg);
}

.esr-leaf-bwd {
	left: 0;
	transform-origin: right center;
	transform: rotateY(0deg);
}

.esr-leaf-bwd.esr-turning {
	transform: rotateY(180deg);
}

.esr-leaf-face {
	position: absolute;
	inset: 0;
	background: #fff;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.esr-leaf-back {
	transform: rotateY(180deg);
}

/* A soft moving sheen that gives the turning page some depth. */
.esr-leaf-shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.72s ease;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0) 60%);
}

.esr-leaf-fwd .esr-leaf-shade {
	background: linear-gradient(90deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.28));
}

.esr-turning .esr-leaf-shade {
	opacity: 1;
}

.esr-book.esr-no-anim .esr-leaf,
.esr-book.esr-no-anim .esr-leaf-shade,
.esr-book.esr-no-anim .esr-slide {
	transition: none;
}

/* Clickable internal links (e.g. a hyperlinked table of contents) overlaid on
   the page canvas at the PDF's own link positions. */
.esr-link {
	position: absolute !important;
	z-index: 3;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 2px !important;
	box-shadow: none !important;
	cursor: pointer !important;
}

.esr-link:hover,
.esr-link:focus-visible {
	background: rgba(0, 0, 0, 0.07) !important;
	outline: 1px solid rgba(0, 0, 0, 0.2) !important;
}

/* Single-page view: one page, roughly double the reading size. */
.esr-book.esr-single .esr-page-left {
	display: none;
}

.esr-book.esr-single .esr-page-right {
	left: 0;
	right: auto;
	width: 100%;
}

.esr-book.esr-single::after {
	display: none; /* no spine on a single page */
}

/* Outgoing-page snapshot used for the single-page turn (fade + nudge). */
.esr-slide {
	position: absolute;
	inset: 0;
	z-index: 6;
	background: #fff;
	transition: transform 0.35s ease, opacity 0.35s ease;
}

.esr-slide canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.esr-slide-out-left {
	transform: translateX(-30px);
	opacity: 0;
}

.esr-slide-out-right {
	transform: translateX(30px);
	opacity: 0;
}

/* ---------- Full screen ---------- */

/* Full screen: the reader fills the display; the book fits the viewport.
   (Separate duplicate rules — an unknown selector would void a combined list.) */
.esr-reader:fullscreen {
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	margin: 0 !important;
	border-radius: 0;
	display: flex !important;
	flex-direction: column !important;
}

.esr-reader:fullscreen .esr-bar {
	flex: 0 0 auto;
}

.esr-reader:fullscreen .esr-stage {
	flex: 1 1 auto;
	max-height: none;
}

.esr-reader:-webkit-full-screen {
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	margin: 0 !important;
	border-radius: 0;
	display: flex !important;
	flex-direction: column !important;
}

.esr-reader:-webkit-full-screen .esr-bar {
	flex: 0 0 auto;
}

.esr-reader:-webkit-full-screen .esr-stage {
	flex: 1 1 auto;
	max-height: none;
}

/* Fallback "full screen" for browsers without the Fullscreen API (e.g. iPad). */
.esr-reader.esr-fake-full {
	position: fixed !important;
	inset: 0 !important;
	z-index: 100000 !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	margin: 0 !important;
	border-radius: 0;
	display: flex !important;
	flex-direction: column !important;
}

.esr-reader.esr-fake-full .esr-bar {
	flex: 0 0 auto;
}

.esr-reader.esr-fake-full .esr-stage {
	flex: 1 1 auto;
	max-height: none;
}

html.esr-noscroll,
html.esr-noscroll body {
	overflow: hidden !important;
}

/* ---------- Notices ---------- */

.esr-loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 0.9rem;
	color: #555;
}

.esr-notice {
	max-width: 640px;
	margin: 1.5rem auto;
	padding: 1.5rem;
	text-align: center;
	background: #f4f4f4;
	border: 1px solid #ddd;
	border-radius: 10px;
	color: #1a1a1a;
}

.esr-btn {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.55rem 1.2rem;
	background: #111;
	color: #fff;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
}

/* ---------- Inline sign-in (gate) ---------- */

/* Strict black / white / grey palette — no brand colour. */
.esr-auth {
	max-width: 420px;
	margin: 1.5rem auto;
	padding: 1.5rem;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.08 );
}

.esr-auth-title {
	margin: 0 0 0.35rem;
	font-size: 1.15rem;
	font-weight: 700;
	color: #111;
}

.esr-auth-intro {
	margin: 0 0 1rem;
	font-size: 0.9rem;
	color: #555;
}

.esr-auth-form label {
	display: block;
	margin-bottom: 0.85rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: #222;
}

.esr-auth-form label span {
	display: block;
	margin-bottom: 0.3rem;
}

.esr-auth-form input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6rem 0.7rem;
	font-size: 1rem;
	border: 1px solid #ccc;
	border-radius: 6px;
	background: #fff;
	color: #111;
}

.esr-auth-form input:focus {
	outline: none;
	border-color: #000;
	box-shadow: 0 0 0 3px rgba( 0, 0, 0, 0.12 );
}

/* Black button, white text — forced past themes that colour every button. */
.esr-auth .esr-auth-submit {
	width: 100% !important;
	margin-top: 0.5rem !important;
	padding: 0.7rem 1.2rem !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: #111 !important;
	color: #fff !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	box-shadow: none !important;
	cursor: pointer !important;
}

.esr-auth .esr-auth-submit:hover {
	background: #000 !important;
}

.esr-auth .esr-auth-submit:disabled {
	opacity: 0.5 !important;
	cursor: default !important;
}

.esr-auth-msg {
	margin-bottom: 1rem;
	padding: 0.6rem 0.75rem;
	border-radius: 6px;
	font-size: 0.85rem;
	background: #f4f4f4;
	color: #222;
	border-left: 3px solid #999;
}

.esr-auth-msg.is-error {
	background: #f4f4f4;
	color: #000;
	border-left-color: #000;
	font-weight: 600;
}

/* ---------- Media queries ---------- */

@media ( prefers-reduced-motion: reduce ) {
	.esr-controls button { transition: none !important; }
	.esr-leaf,
	.esr-leaf-shade,
	.esr-slide { transition: none; }
}

@media ( max-width: 600px ) {
	.esr-bar { flex-wrap: wrap !important; }
	.esr-title { flex: 1 1 100%; margin-bottom: 0.35rem; }
	.esr-stage { padding: 0.9rem 0.5rem !important; max-height: 76vh; }
}