/**
 * Flipbook Reader reader styles.
 */

.fbr {
	--fbr-bg: #f4f2ee;
	--fbr-accent: #1c1b19;
	--fbr-bar-bg: rgba(24, 23, 21, 0.92);
	--fbr-bar-fg: #f7f5f1;
	--fbr-bar-hover: rgba(247, 245, 241, 0.16);
	--fbr-bar-line: rgba(247, 245, 241, 0.25);
	--fbr-gutter: 24px;
	--fbr-bar-space: 76px;
	--fbr-btn-size: 36px;

	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--fbr-bg);
	color: var(--fbr-accent);
	font-family: inherit;
	isolation: isolate;
}

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

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

.fbr-stage {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

/* Two classes deep so this beats the library's own `.stf__parent` rule,
   whichever order the two stylesheets end up in. */
.fbr .fbr-book {
	position: absolute;
	inset: var(--fbr-gutter) var(--fbr-gutter) var(--fbr-bar-space);
	transform-origin: center center;
	transition: transform 0.18s ease-out;
	opacity: 0;
}

/* With autoSize off the library never gives its wrapper a height — it relies
   on an aspect-ratio padding hack that would overflow a fixed-height embed.
   We drive the height from the stage instead. */
.fbr .stf__wrapper {
	height: 100%;
}

/* StPageFlip copies its minWidth/minHeight settings onto the element as inline
   styles. We need those values for its portrait-breakpoint maths, but as a
   layout floor they push the book wider than the stage on small phones and the
   page gets clipped. Overriding here keeps the breakpoint and drops the floor. */
.fbr .fbr-book {
	min-width: 0 !important;
	min-height: 0 !important;
}

.fbr.is-ready .fbr-book {
	opacity: 1;
	transition: opacity 0.4s ease 0.1s, transform 0.18s ease-out;
}

.fbr.is-panning .fbr-book {
	transition: none;
}

/* A page. StPageFlip adds .stf__item to these. */
.fbr-pg {
	overflow: hidden;
	background: #fff;
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0) 4%);
}

.fbr-pg canvas {
	display: block;
	background: #fff;
}

/* Until a page is drawn, show paper rather than a transparent gap. */
.fbr-pg:not(.is-drawn)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
}

/* ------------------------------------------------------------ page edges */

.fbr-edge {
	position: absolute;
	top: 0;
	bottom: var(--fbr-bar-space);
	width: 60px;
	z-index: 7;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fbr-accent);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.fbr-edge--prev {
	left: 0;
}

.fbr-edge--next {
	right: 0;
}

.fbr.is-ready:hover .fbr-edge,
.fbr-edge:focus-visible {
	opacity: 0.55;
}

.fbr-edge:hover {
	opacity: 1;
}

.fbr-edge svg {
	width: 34px;
	height: 34px;
	filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.7));
}

@media (max-width: 782px) {
	.fbr-edge {
		display: none;
	}
}

/* -------------------------------------------------------------- controls */

.fbr-bar {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 4px;
	max-width: calc(100% - 24px);
	padding: 6px;
	border-radius: 999px;
	background: var(--fbr-bar-bg);
	color: var(--fbr-bar-fg);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
	backdrop-filter: blur(6px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.fbr.is-ready .fbr-bar,
.fbr.is-failed .fbr-bar {
	opacity: 1;
	pointer-events: auto;
}

.fbr-bar-group {
	display: flex;
	align-items: center;
	gap: 2px;
}

.fbr-bar-group--end {
	margin-left: 6px;
	padding-left: 8px;
	border-left: 1px solid rgba(247, 245, 241, 0.2);
}

.fbr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--fbr-btn-size);
	height: var(--fbr-btn-size);
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--fbr-bar-fg);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.fbr-btn:hover,
.fbr-btn:focus-visible {
	background: rgba(247, 245, 241, 0.16);
	color: inherit;
}

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

.fbr-counter {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0 6px;
	font-size: 13px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.fbr-page-input {
	width: auto;
	min-width: 2.4em;
	margin: 0;
	padding: 4px 6px;
	border: 1px solid rgba(247, 245, 241, 0.25);
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.25);
	color: inherit;
	font: inherit;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	text-align: center;
	box-shadow: none;
}

.fbr-page-input:focus {
	outline: 2px solid rgba(247, 245, 241, 0.5);
	outline-offset: 1px;
}

.fbr-counter-sep {
	opacity: 0.5;
}

.fbr-zoom-level {
	min-width: 3.4em;
	font-size: 12px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	opacity: 0.75;
}

@media (max-width: 600px) {
	.fbr {
		--fbr-gutter: 10px;
		--fbr-bar-space: 66px;
		--fbr-btn-size: 32px;
	}

	.fbr-zoom-level {
		display: none;
	}
}

/* ------------------------------------------------------------------ zoom */

.fbr-pan {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: none;
	cursor: grab;
	touch-action: none;
}

.fbr.is-zoomed .fbr-pan {
	display: block;
}

.fbr.is-panning .fbr-pan {
	cursor: grabbing;
}

/* --------------------------------------------------------------- loading */

.fbr-status {
	position: absolute;
	inset: 0;
	z-index: 8;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 24px;
	background: var(--fbr-bg);
	text-align: center;
	transition: opacity 0.35s ease, visibility 0.35s ease;
}

.fbr.is-ready .fbr-status {
	opacity: 0;
	visibility: hidden;
}

.fbr-status-text {
	margin: 0;
	font-size: 14px;
	letter-spacing: 0.02em;
	opacity: 0.7;
}

.fbr-spinner {
	width: 26px;
	height: 26px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	opacity: 0.4;
	animation: fbr-spin 0.8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
	.fbr-spinner {
		animation-duration: 2.4s;
	}

	.fbr-book {
		transition: none;
	}
}

.fbr-progress {
	width: min(220px, 60%);
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	opacity: 0.15;
}

.fbr-progress-bar {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: currentColor;
	transition: width 0.2s ease;
}

.fbr.is-failed .fbr-spinner,
.fbr.is-failed .fbr-progress {
	display: none;
}

.fbr-fallback-link {
	color: inherit;
	font-size: 14px;
}

.fbr-noscript {
	position: absolute;
	inset: auto 0 40% 0;
	z-index: 9;
	text-align: center;
}

/* ---------------------------------------------------------- full screen */

.fbr:fullscreen {
	width: 100%;
	height: 100%;
	background: var(--fbr-bg);
}

.fbr:fullscreen .fbr-book {
	inset: 28px 28px var(--fbr-bar-space);
}

/* ------------------------------------------------------- standalone page */

.fbr--standalone {
	flex: 1 1 auto;
	min-height: 0;
}

body.fbr-page {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background: var(--fbr-bg, #f4f2ee);
}

.fbr-page-head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 14px clamp(16px, 4vw, 40px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.fbr-page-brand {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

.fbr-page-logo {
	display: block;
	width: auto;
	height: 40px;
	max-height: 40px;
}

.fbr-page-title {
	margin: 0;
	font-size: clamp(15px, 2vw, 19px);
	font-weight: 500;
	letter-spacing: 0.01em;
	opacity: 0.72;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fbr-page-main {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

@media (max-width: 600px) {
	.fbr-page-head {
		gap: 12px;
		padding: 10px 14px;
	}

	.fbr-page-logo {
		height: 30px;
	}
}

/* ---------------------------------------------------------------- misc */

.fbr-notice {
	margin: 0;
	padding: 14px 18px;
	border-radius: 6px;
	background: #fdf4f4;
	border: 1px solid #e6c5c5;
	color: #8a2b2b;
	font-size: 14px;
}

.fbr .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------- theme-proofing

   The reader sits inside whatever theme the site runs, and themes style bare
   `a` and `button` elements globally — Elementor's global link colour most of
   all. Those rules outrank a single-class selector, and because the icons are
   drawn with `currentColor`, one inherited accent colour turns the entire
   toolbar that colour and makes it unreadable on the dark bar.

   These declarations pin the controls to the reader's own palette. They are
   marked important to win against ambient theme CSS, but every value still
   comes from the custom properties at the top of this file, so recolouring
   through those (or through the Elementor Style tab) keeps working. */

.fbr .fbr-bar {
	background: var(--fbr-bar-bg) !important;
	color: var(--fbr-bar-fg) !important;
}

.fbr .fbr-btn,
.fbr .fbr-btn:link,
.fbr .fbr-btn:visited,
.fbr .fbr-btn:active {
	box-sizing: border-box !important;
	width: var(--fbr-btn-size) !important;
	height: var(--fbr-btn-size) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: none !important;
	color: var(--fbr-bar-fg) !important;
	box-shadow: none !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	-webkit-appearance: none;
	appearance: none;
}

.fbr .fbr-btn:hover,
.fbr .fbr-btn:focus,
.fbr .fbr-btn:focus-visible {
	background: var(--fbr-bar-hover) !important;
	color: var(--fbr-bar-fg) !important;
}

.fbr .fbr-btn svg {
	stroke: currentColor !important;
	fill: none !important;
}

.fbr .fbr-counter,
.fbr .fbr-counter-sep,
.fbr .fbr-zoom-level {
	color: var(--fbr-bar-fg) !important;
}

.fbr .fbr-page-input {
	height: auto !important;
	min-height: 0 !important;
	padding: 4px 6px !important;
	border: 1px solid var(--fbr-bar-line) !important;
	border-radius: 6px !important;
	background: rgba(0, 0, 0, 0.25) !important;
	color: var(--fbr-bar-fg) !important;
	box-shadow: none !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
	text-transform: none !important;
}

.fbr .fbr-edge,
.fbr .fbr-edge:link,
.fbr .fbr-edge:visited,
.fbr .fbr-edge:hover,
.fbr .fbr-edge:focus {
	padding: 0 !important;
	min-height: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--fbr-accent) !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
}

/* ------------------------------------------------------- thumbnail grid */

.fbr-thumbs {
	position: absolute;
	inset: 0;
	z-index: 12;
	display: flex;
	flex-direction: column;
	background: var(--fbr-bg);
}

.fbr-thumbs[hidden] {
	display: none;
}

.fbr-thumbs-head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.fbr-thumbs-title {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.6;
}

/* The close control sits on the light panel, not the dark bar. */
.fbr .fbr-thumbs-close,
.fbr .fbr-thumbs-close:hover,
.fbr .fbr-thumbs-close:focus {
	color: var(--fbr-accent) !important;
}

.fbr .fbr-thumbs-close:hover,
.fbr .fbr-thumbs-close:focus {
	background: rgba(0, 0, 0, 0.07) !important;
}

.fbr-thumbs-grid {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
	gap: 18px 16px;
	padding: 20px 16px 28px;
	-webkit-overflow-scrolling: touch;
}

.fbr .fbr-thumb {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--fbr-accent) !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.fbr-thumb-shell {
	display: block;
	width: 100%;
	background: #fff;
	border-radius: 2px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: outline-color 0.15s ease, transform 0.15s ease;
}

.fbr-thumb-shell canvas {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
}

.fbr-thumb:hover .fbr-thumb-shell {
	transform: translateY(-2px);
}

.fbr-thumb:focus-visible .fbr-thumb-shell,
.fbr-thumb.is-current .fbr-thumb-shell {
	outline-color: currentColor;
}

.fbr-thumb-num {
	font-size: 12px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	opacity: 0.55;
}

.fbr-thumb.is-current .fbr-thumb-num {
	font-weight: 700;
	opacity: 1;
}

/* Hide the flip controls while the grid is up. */
.fbr.is-thumbs-open .fbr-bar,
.fbr.is-thumbs-open .fbr-edge {
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 600px) {
	.fbr-thumbs-grid {
		grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
		gap: 14px 12px;
		padding: 14px 12px 20px;
	}
}

/* ------------------------------------- standalone header, theme-proofed

   Elementor's global kit styles `h1` (72px on this build), which outranks a
   single-class selector and blows the header out. Same defence as the
   toolbar: enough specificity to win, values still from the tokens above. */

body.fbr-page .fbr-page-head .fbr-page-title {
	margin: 0 !important;
	padding: 0 !important;
	font-size: clamp(15px, 2vw, 19px) !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	color: inherit !important;
}

body.fbr-page .fbr-page-head .fbr-page-brand {
	font-size: 16px !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
}

body.fbr-page .fbr-page-head .fbr-page-logo {
	width: auto !important;
	height: 40px !important;
	max-height: 40px !important;
	max-width: 220px !important;
	object-fit: contain;
	object-position: left center;
}

@media (max-width: 600px) {
	body.fbr-page .fbr-page-head .fbr-page-logo {
		height: 30px !important;
		max-width: 140px !important;
	}

	body.fbr-page .fbr-page-head .fbr-page-brand {
		font-size: 14px !important;
	}
}