.pfb-wrapper {
	position: relative;
	max-width: 100%;
	margin: 0 auto;
	padding: 56px 16px 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	user-select: none;
	--pfb-arrow-color: #1146e6;
	/* Size of the round nav arrows. JS reads the rendered button size rather
	   than this value, so the @media override below stays the single source of
	   truth for how big they are — but keeping it as a variable lets the layout
	   reserve the matching gutter without hardcoding numbers twice. */
	--pfb-arrow-size: 72px;
	/* Set by JS on every layout pass: where the visible page edges sit inside
	   .pfb-stage. A lone cover only fills half the stage, so the spine/edge
	   shading can't just hug the stage's own box. */
	--pfb-edge-left: 0px;
	--pfb-edge-right: 0px;
	/* Keeps a mid-flip page (or a zoomed one) from widening the document and
	   producing a horizontal scrollbar on the whole site. `clip` doesn't create
	   a scroll container, so it can't trap the page's own vertical scrolling. */
	overflow-x: clip;
}

/* Reset condiviso per i pulsanti del plugin.
   I temi definiscono quasi sempre uno stile globale per `button` (qui era
   `button { padding: 0.5rem 1rem }` nel reset del tema). Combinato con
   box-sizing:border-box, quel padding mangia il box di un pulsante a
   dimensione fissa: la toolbar 36x36 restava con 4px di larghezza utile e le
   icone sparivano. Ogni proprieta' che non dichiariamo la eredita' dal tema,
   quindi le azzeriamo tutte esplicitamente.

   Il selettore e' prefissato con .pfb-wrapper apposta: alza la specificita' a
   (0,2,0) e batte i tipici `.entry-content button` / `.elementor button` dei
   temi, senza dover ricorrere a !important. Il padding e' l'unica eccezione:
   e' la proprieta' che ha rotto le icone, non c'e' nessun motivo legittimo per
   cui un tema debba spaziare i nostri pulsanti-icona, e alcuni page builder
   arrivano a (0,2,1). */
.pfb-wrapper .pfb-tool,
.pfb-wrapper .pfb-arrow {
	padding: 0 !important;
	margin: 0;
	border: none;
	box-sizing: border-box;
	line-height: 1;
	min-width: 0;
	min-height: 0;
	flex: 0 0 auto;
	text-decoration: none;
	-webkit-appearance: none;
	appearance: none;
}

/* Le icone non devono mai poter essere compresse dal flex del pulsante: con
   flex:none, se un tema riesce comunque a stringere il contenitore, l'icona
   deborda invece di ridursi a una scheggia invisibile.

   Niente `display` qui: questo selettore vale (0,2,1) e batterebbe le regole
   .pfb-tool-zoom/.pfb-tool-sound piu' sotto, che valgono (0,2,0) e servono a
   nascondere l'icona dello stato inattivo. Con un display: block si vedrebbero
   entrambe le icone (lente + e lente -, audio on e off) contemporaneamente. */
.pfb-wrapper .pfb-tool svg,
.pfb-wrapper .pfb-arrow svg {
	flex: none;
}

/* Top-right toolbar: download / zoom / fullscreen / sound */
.pfb-toolbar {
	position: absolute;
	top: 0;
	right: 16px;
	display: flex;
	align-items: center;
	gap: 6px;
	z-index: 10;
}

.pfb-tool {
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: #5b6472;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.pfb-wrapper .pfb-tool svg {
	width: 20px;
	height: 20px;
}

.pfb-tool:hover {
	background: rgba(17, 70, 230, 0.08);
	color: var(--pfb-arrow-color);
}

.pfb-tool:focus-visible {
	outline: 2px solid var(--pfb-arrow-color);
	outline-offset: 2px;
}

.pfb-tool-sound .pfb-icon-sound-off {
	display: none;
}

.pfb-tool-sound.pfb-muted .pfb-icon-sound-on {
	display: none;
}

.pfb-tool-sound.pfb-muted .pfb-icon-sound-off {
	display: block;
}

.pfb-tool-zoom .pfb-icon-zoom-out {
	display: none;
}

.pfb-wrapper.pfb-zoomed .pfb-tool-zoom .pfb-icon-zoom-in {
	display: none;
}

.pfb-wrapper.pfb-zoomed .pfb-tool-zoom .pfb-icon-zoom-out {
	display: block;
}

/* Book area: stage + big blue arrows, floating with soft shadow like a real book.
   StPageFlip sets width:100% on .pfb-stage — without an explicit width here that
   resolves against nothing (flex items shrink-wrap by default) and the book
   collapses, so give it a real width to stretch against. */
.pfb-book {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	filter: drop-shadow(0 24px 40px rgba(20, 30, 60, 0.28));
}

.pfb-stage {
	position: relative;
	margin: 0 auto;
	transform-origin: center center;
	transition: transform 0.25s ease;
	/* StPageFlip writes an inline `min-width` (its own minWidth setting, doubled
	   in landscape) onto this element at construction time and never updates it.
	   That inline floor is what makes the book overflow the viewport when the
	   window is narrowed after load — min-width beats max-width in CSS, so the
	   stage simply refuses to shrink. Neutralising it here is what lets the book
	   stay inside the screen at every width; the library's own portrait/landscape
	   switch reads the `minWidth` *setting* (which JS keeps updating), not this
	   style, so nothing is lost by zeroing it. */
	min-width: 0 !important;
	max-width: 100%;
}

.pfb-stage.pfb-panning {
	transition: none;
}

/* StPageFlip's own stylesheet already stretches any canvas inside .stf__parent
   to its page box; this is a guard so a page can never spill out at its raster
   size if that rule ever moves. */
.pfb-stage canvas {
	display: block;
	max-width: 100%;
}

/* Pages whose PDF content hasn't been rasterised yet (rendering is queued a few
   pages at a time so a long PDF doesn't allocate every canvas at once). */
.pfb-page {
	background: #fff;
}

.pfb-page:not(.pfb-rendered) {
	background: #f4f6fb;
}

/* Transparent hit layer above .pfb-stage: only active while zoomed, so drag
   there pans the page instead of fighting StPageFlip's own drag-to-flip
   listener on the stage underneath. */
.pfb-zoom-overlay {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	touch-action: none;
	overscroll-behavior: contain;
}

.pfb-wrapper.pfb-zoomed .pfb-zoom-overlay {
	pointer-events: auto;
	cursor: grab;
}

.pfb-wrapper.pfb-zoomed .pfb-zoom-overlay:active {
	cursor: grabbing;
}

/* Subtle spine/page-edge shading so the book reads as 3D, closed or open.
   Anchored to the *visible* page edges (--pfb-edge-*), which differ from the
   stage's own box whenever a lone page is showing. */
.pfb-stage::before,
.pfb-stage::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 22px;
	pointer-events: none;
	z-index: 3;
	opacity: 1;
	transition: opacity 0.18s ease;
}

/* Mentre una pagina e' in movimento questi bordi sono obsoleti: sono ancorati
   alla geometria misurata all'ultimo assestamento, ma la pagina che gira si e'
   gia' spostata. Chiudendo il libro sulla copertina (o aprendo l'ultima pagina)
   la banda restava dipinta sul bordo vecchio, sospesa accanto al vuoto, per
   tutta la durata dell'animazione. Durante il giro la libreria disegna gia' le
   sue ombre di curvatura, quindi le nostre sono anche ridondanti: si dissolvono
   all'inizio del movimento e rientrano quando la pagina si e' posata. */
.pfb-wrapper.pfb-flipping .pfb-stage::before,
.pfb-wrapper.pfb-flipping .pfb-stage::after {
	opacity: 0;
}

.pfb-stage::before {
	left: var(--pfb-edge-left);
	background: linear-gradient(to right, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0));
}

.pfb-stage::after {
	right: var(--pfb-edge-right);
	background: linear-gradient(to left, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0));
}

.pfb-wrapper.pfb-cover .pfb-stage {
	cursor: pointer;
}

/* Closed cover: the left edge is the spine — bound, flat, no page hint. The
   right edge is where the unread pages actually stack, so that's where the
   "stacked pages" hatch belongs. */
.pfb-wrapper.pfb-cover .pfb-stage::before {
	display: none;
}

.pfb-wrapper.pfb-cover .pfb-stage::after {
	width: 10px;
	background: repeating-linear-gradient(
		to left,
		rgba(0, 0, 0, 0.08) 0px,
		rgba(0, 0, 0, 0.08) 1px,
		rgba(0, 0, 0, 0) 1px,
		rgba(0, 0, 0, 0) 3px
	);
}

/* Last page: mirror of the front cover above — the read pages stack on the
   left, and the right edge is the spine. */
.pfb-wrapper.pfb-back-cover .pfb-stage::after {
	display: none;
}

.pfb-wrapper.pfb-back-cover .pfb-stage::before {
	width: 10px;
	background: repeating-linear-gradient(
		to right,
		rgba(0, 0, 0, 0.08) 0px,
		rgba(0, 0, 0, 0.08) 1px,
		rgba(0, 0, 0, 0) 1px,
		rgba(0, 0, 0, 0) 3px
	);
}

/* Loading / error state */
.pfb-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 300px;
	width: 100%;
	color: #555;
	font-size: 14px;
	text-align: center;
}

.pfb-wrapper.pfb-ready .pfb-loading {
	display: none;
}

.pfb-wrapper.pfb-error .pfb-spinner {
	display: none;
}

.pfb-wrapper:not(.pfb-ready) .pfb-book,
.pfb-wrapper:not(.pfb-ready) .pfb-progress {
	display: none;
}

.pfb-spinner {
	width: 36px;
	height: 36px;
	border: 4px solid #dbe4ff;
	border-top-color: var(--pfb-arrow-color);
	border-radius: 50%;
	animation: pfb-spin 0.8s linear infinite;
}

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

/* Big blue round arrows */
.pfb-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--pfb-arrow-size);
	height: var(--pfb-arrow-size);
	border-radius: 50%;
	/* !important: page builders (Elementor's global Buttons style, in
	   particular) ship a site-wide `button:hover { background: ... }` rule
	   that otherwise wins over this plain class selector and turns every
	   arrow the theme's accent color on hover instead of staying brand blue. */
	background: var(--pfb-arrow-color) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(17, 70, 230, 0.35);
	/* left/right: JS recomputes these on every layout pass (resize, flip, the
	   lone-page centering shift) — animate so the arrow eases to its new spot
	   instead of snapping, roughly matching the page's own flip timing. */
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease,
		left 0.5s ease, right 0.5s ease;
	z-index: 5;
}

.pfb-wrapper .pfb-arrow svg {
	width: 45%;
	height: 45%;
}

.pfb-arrow:hover {
	background: var(--pfb-arrow-color) !important;
	transform: translateY(-50%) scale(1.08);
	box-shadow: 0 8px 22px rgba(17, 70, 230, 0.45);
}

/* Narrow viewports leave no room to sit the arrows beside the book, so they
   ride on top of the page instead (JS adds this class when it runs out of
   gutter). A ring separates them from whatever artwork is underneath. */
.pfb-wrapper.pfb-arrows-inside .pfb-arrow {
	box-shadow: 0 4px 14px rgba(10, 20, 50, 0.35), 0 0 0 3px rgba(255, 255, 255, 0.85);
}

/* Zoomed in: only dragging the document should move anything on screen —
   page navigation isn't the point of this view, so the arrows step aside. */
.pfb-wrapper.pfb-zoomed .pfb-arrow {
	opacity: 0 !important;
	pointer-events: none;
}

.pfb-arrow:active {
	transform: translateY(-50%) scale(0.96);
}

/* Suppress the browser's default focus ring after a mouse click (it reads as
   a stuck black outline) while keeping a visible ring for keyboard users. */
.pfb-arrow:focus {
	outline: none;
}

.pfb-arrow:focus-visible {
	outline: 3px solid rgba(17, 70, 230, 0.5);
	outline-offset: 3px;
}

.pfb-arrow[disabled] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/* Fallback position before JS measures the real book geometry and takes over
   (see syncGeometry() in flipbook.js). */
.pfb-arrow-prev {
	left: 0;
}

.pfb-arrow-next {
	right: 0;
}

/* Bottom progress bar — width is matched to the rendered book by JS so it
   reads as part of it rather than as a page-wide rule. */
.pfb-progress {
	width: 100%;
	height: 6px;
	background: #e3e6ec;
	border-radius: 3px;
	margin-top: 22px;
	overflow: hidden;
	transition: max-width 0.25s ease;
}

.pfb-progress-bar {
	height: 100%;
	width: 100%;
	transform: scaleX(0);
	transform-origin: left;
	background: #8a94a6;
	border-radius: 3px;
	transition: transform 0.25s ease;
}

/* In-place zoom: .pfb-stage itself scales up via a JS-driven transform (see
   applyPanZoom() in flipbook.js) instead of opening a separate lightbox. Not
   clipped on .pfb-book — the arrows live in that same box and could end up
   entirely outside it (and so unclickable); the wrapper's overflow-x: clip
   handles the only case that actually hurts, sideways page growth. */

/* Fullscreen: the wrapper becomes the whole screen, so it needs its own
   background and vertical centering — without this the book keeps its
   in-page size against a transparent (usually black) backdrop. */
.pfb-wrapper:fullscreen {
	width: 100vw;
	height: 100vh;
	background: #f7f8fb;
	justify-content: center;
	padding: 56px 16px 28px;
	box-sizing: border-box;
}

.pfb-wrapper:fullscreen .pfb-progress {
	margin-top: 18px;
}

/* Responsive: smaller arrows and toolbar so they don't swallow the page */
@media (max-width: 782px) {
	.pfb-wrapper {
		--pfb-arrow-size: 52px;
		padding: 48px 10px 24px;
	}
	.pfb-toolbar {
		right: 8px;
	}
	.pfb-wrapper .pfb-tool {
		width: 32px;
		height: 32px;
	}
	.pfb-wrapper .pfb-tool svg {
		width: 18px;
		height: 18px;
	}
}

@media (max-width: 400px) {
	.pfb-wrapper {
		--pfb-arrow-size: 44px;
		padding: 46px 6px 22px;
	}
}

/* Respect a reduced-motion preference: the flip itself is the content, but the
   easing of arrows, shifts and hover scaling is pure decoration. */
@media (prefers-reduced-motion: reduce) {
	.pfb-arrow,
	.pfb-stage,
	.pfb-stage::before,
	.pfb-stage::after,
	.pfb-progress,
	.pfb-progress-bar {
		transition: none;
	}
	.pfb-arrow:hover {
		transform: translateY(-50%);
	}
}