/**
 * CR PDF to Flipbook — front-end styles.
 * Loaded after the flipbook-js vendor stylesheet so these rules can
 * override it where needed.
 */

/* PDF Embedder's Gutenberg block wraps its markup in this container.
   It can persist around our injected flipbook, so keep it (and anything
   inside it) from ever overflowing its own parent's width. */
.wp-block-pdfemb-pdf-embedder-viewer {
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.wp-block-pdfemb-pdf-embedder-viewer * {
	max-width: 100%;
	box-sizing: border-box;
}

/* The persistent toolbar sits above both the flipbook and the hidden
   default viewer, and is never hidden by the "Single View" toggle — it
   holds the one control (Single View / Flipbook View) that needs to
   stay reachable no matter which view is currently showing. */
.crptf-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 0.5em;
	font-family: sans-serif;
}

.crptf-toolbar * {
	font-family: inherit;
}

.crptf-flipbook-wrap {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 1.5em 0;
	box-sizing: border-box;
	/* <button> elements don't inherit the page's font by default in most
	   browsers (they use the OS UI font instead) — force the whole
	   widget, including the buttons, to pick up whatever font cascades
	   down from the surrounding page/theme. */
	font-family: inherit;
}

.crptf-flipbook-wrap * {
	font-family: inherit;
}

.crptf-flipbook {
	/* The flipbook library gives each page position:absolute. Without
	   position set here, those pages fall back to the nearest
	   *positioned* ancestor for their containing block — often the
	   viewport — and blow out to the full browser width. Establishing
	   a positioning context here keeps everything confined to this
	   element (and therefore to its parent's width). */
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	background: #E7E9EF;
	min-height: 120px;
}

.crptf-flipbook * {
	box-sizing: border-box;
}

.crptf-flipbook img {
	max-width: 100%;
	height: auto;
	display: block;
	pointer-events: none;
	user-select: none;
}

/* Single-page PDFs (class added by JS — see cr-pdf-flipbook.js): the
   vendor stylesheet always splits pages into a 50%-width left/right
   spread, with left/right decided by whether a page lands on an odd or
   even DOM position — including flipbook-js's own invisible "hidden
   cover" element, which is what was pinning a lone real page into just
   the left half. With only one real page there's nothing to spread
   against, so fill the whole container and neutralize the flip-style
   hover tilt, which doesn't make sense with nothing to turn to. */
.crptf-flipbook.crptf-single-page .c-flipbook__page {
	width: 100% !important;
	left: 0 !important;
	right: 0 !important;
	border-radius: 0 !important;
	cursor: default !important;
	/* The page <div> now spans the full container, but the <img> inside
	   only ever caps at its own rendered resolution (max-width:100%) —
	   it never stretches past that to actually fill a wider box. If
	   that resolution is narrower than the container, center it in the
	   leftover space instead of leaving it flush left. */
	display: flex;
	align-items: center;
	justify-content: center;
}

.crptf-flipbook.crptf-single-page .c-flipbook__page:hover,
.crptf-flipbook.crptf-single-page .c-flipbook__page.is-active:hover {
	transform: rotateY( 0 ) !important;
}

.crptf-flipbook .crptf-status {
	margin: 0;
	padding: 2em 1em;
	text-align: center;
	color: #212121;
	font-size: 0.95em;
}

.crptf-controls {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.75em;
	margin-bottom: 0.75em;
	background-color: #898989;
	padding: 6px;
	box-sizing: border-box;
	font-family: sans-serif;
}

.crptf-page-indicator {
	font-size: 0.85em;
	color: #FFFFFF;
	white-space: nowrap;
}

.crptf-nav-btn,
.crptf-fullscreen-btn,
.crptf-zoom-in-btn,
.crptf-zoom-out-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	cursor: pointer;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	color: #212121;
	flex: none;
}

.crptf-nav-btn:hover,
.crptf-fullscreen-btn:hover,
.crptf-zoom-in-btn:hover,
.crptf-zoom-out-btn:hover {
	background: #f2f2f2;
}

.crptf-nav-btn:disabled,
.crptf-fullscreen-btn:disabled,
.crptf-zoom-in-btn:disabled,
.crptf-zoom-out-btn:disabled {
	cursor: not-allowed;
	opacity: 0.45;
}

.crptf-nav-btn svg,
.crptf-fullscreen-btn svg,
.crptf-zoom-in-btn svg,
.crptf-zoom-out-btn svg {
	width: 14px;
	height: 14px;
	display: block;
}

/* Fullscreen button — left corner. */
.crptf-controls-actions {
	position: absolute;
	top: 6px;
	left: 6px;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Zoom in/out buttons — right corner. */
.crptf-controls-zoom {
	position: absolute;
	top: 6px;
	right: 6px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.crptf-single-view-btn {
	cursor: pointer;
	height: 26px;
	padding: 0 10px;
	line-height: 24px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	color: #212121;
	font-size: 0.95em;
	white-space: nowrap;
	flex: none;
	/* Keeps the button (and the fullscreen icon next to it) from
	   shifting position when the label toggles between "Single View"
	   and the slightly wider "Flipbook View". */
	min-width: 6.5em;
	text-align: center;
}

.crptf-single-view-btn:hover {
	background: #f2f2f2;
}

/* Zoom overlay: shows the page currently open in the flipbook, at a
   higher pdf.js-rendered resolution, inside a scrollable/pannable
   viewport so visitors can move around once it's larger than the
   flipbook's own footprint. Covers the whole flipbook widget rather
   than the full browser screen, so it works independently of (and at
   the same time as) the fullscreen toggle. */
.crptf-zoom-overlay {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 20;
	background: rgba(20, 20, 20, 0.92);
	flex-direction: column;
	font-family: sans-serif;
}

.crptf-zoom-overlay * {
	font-family: inherit;
	box-sizing: border-box;
}

.crptf-zoom-overlay.is-visible {
	display: flex;
}

.crptf-zoom-overlay-toolbar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	padding: 6px;
	background: #898989;
}

.crptf-zoom-overlay-zoom-group {
	display: flex;
	align-items: center;
	gap: 6px;
}

.crptf-zoom-overlay-toolbar .crptf-zoom-in-btn,
.crptf-zoom-overlay-toolbar .crptf-zoom-out-btn {
	background: #fff;
}

.crptf-zoom-close-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	cursor: pointer;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	color: #212121;
	font-size: 16px;
	line-height: 1;
	flex: none;
}

.crptf-zoom-close-btn:hover {
	background: #f2f2f2;
}

.crptf-zoom-overlay-scroll {
	flex: 1 1 auto;
	overflow: auto;
	padding: 16px;
}

/* Holds one image (a single/cover page) or two (an open spread) side by
   side, matching whatever the flipbook itself currently has open.
   Deliberately NOT a flex/centered layout: a flex item without
   flex-shrink:0 gets silently squashed to fit the visible area no
   matter what pixel size its width is set to, which is what was making
   every zoom level look about the same and cropping the rendered page.
   Plain inline-block content lets the image sit at its true rendered
   size and the scroll container handles any overflow directly. */
.crptf-zoom-overlay-pages {
	display: inline-block;
	white-space: nowrap;
}

.crptf-zoom-overlay-pages img {
	display: inline-block;
	vertical-align: top;
	max-width: none;
	height: auto;
	margin-right: 2px;
}

.crptf-zoom-overlay-pages img:last-child {
	margin-right: 0;
}

/* The original PDF Embedder markup is left completely untouched and
   simply hidden here — PDF Embedder's own script still converts it into
   its normal viewer on page load. "Single View" reveals it and hides
   the flipbook UI, so visitors see PDF Embedder's real default viewer
   rather than a re-creation of it. */
.crptf-original-viewer {
	display: none;
	width: 100%;
	max-width: 100%;
	margin: 1.5em 0;
	box-sizing: border-box;
}

.crptf-original-viewer.is-visible {
	display: block;
}

/* While the wrap is the browser's fullscreen element, center the
   flipbook (with its controls bar still on top) inside the viewport. */
.crptf-flipbook-wrap:fullscreen {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	background: #000;
	padding: 20px;
}

.crptf-flipbook-wrap:-webkit-full-screen {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	background: #000;
	padding: 20px;
}

.crptf-flipbook-wrap:fullscreen .crptf-controls,
.crptf-flipbook-wrap:-webkit-full-screen .crptf-controls {
	width: 100%;
	max-width: 900px;
}

.crptf-flipbook-wrap:fullscreen .crptf-flipbook,
.crptf-flipbook-wrap:-webkit-full-screen .crptf-flipbook {
	margin-top: 0.75em;
}

@media (max-width: 480px) {
	.crptf-controls {
		gap: 0.5em;
		padding-left: 34px;  /* keep Prev/indicator/Next clear of the corner fullscreen button */
		padding-right: 66px; /* keep Prev/indicator/Next clear of the corner zoom buttons */
	}

	.crptf-single-view-btn {
		padding: 0 7px;
		font-size: 0.75em;
		min-width: 5.5em;
	}
}