/* ==========================================================
   Cover launcher (shortcode output)
   ========================================================== */
.fbm-launcher {
	display: inline-block;
	position: relative;
	cursor: pointer;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	max-width: 320px;
	outline: none;
}
.fbm-launcher:hover,
.fbm-launcher:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
}
.fbm-launcher-cover {
	position: relative;
	width: 100%;
}
.fbm-launcher-cover img {
	display: block;
	width: 100%;
	height: auto;
}
.fbm-launcher-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 45%);
	color: #fff;
	opacity: 0;
	transition: opacity 0.25s ease;
}
.fbm-launcher:hover .fbm-launcher-overlay,
.fbm-launcher:focus-visible .fbm-launcher-overlay {
	opacity: 1;
}
.fbm-launcher-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.4);
}
.fbm-launcher-label {
	position: absolute;
	bottom: 14px;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
}

/* ==========================================================
   Fullscreen overlay
   ========================================================== */
body.fbm-noscroll {
	overflow: hidden;
}

.fbm-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: radial-gradient(ellipse at center, #2b2b2f 0%, #121214 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.28s ease;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.fbm-overlay.fbm-overlay-visible {
	opacity: 1;
}

/* Theme isolation. WordPress themes very commonly apply their own global
   font/color rules to plain elements (button, span, p, etc.) — often with
   !important — which otherwise bleeds into the overlay's icons/labels
   (button font-family resets are the most common offender, and the
   zoom/arrow icons use `stroke: currentColor`, so a theme-forced `color`
   on <button> changes icon color too). Scoping this to the overlay's own
   ID (rather than its class) gives it specificity no ordinary theme
   selector realistically outranks, even when the theme also uses
   !important, so the fullscreen viewer looks identical on every site. */
#fbm-overlay-root,
#fbm-overlay-root * {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: normal !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-sizing: border-box;
}

.fbm-loading {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	z-index: 5;
	background: inherit;
}
#fbm-overlay-root .fbm-loading {
	color: #e6e6e6 !important;
}
.fbm-spinner {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, 0.2);
	border-top-color: #fff;
	animation: fbm-spin 0.9s linear infinite;
}
@keyframes fbm-spin {
	to { transform: rotate(360deg); }
}
.fbm-progress-track {
	width: 180px;
	max-width: 60vw;
	height: 4px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.18);
	overflow: hidden;
}
.fbm-progress-fill {
	width: 0%;
	height: 100%;
	background: #fff;
	border-radius: 2px;
	transition: width 0.25s ease;
}
#fbm-overlay-root .fbm-error-text {
	color: #ff8a8a !important;
	font-size: 15px !important;
}

.fbm-zoom-viewport {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	touch-action: none;
}

.fbm-book-container {
	position: relative;
	/* Fill the zoom viewport in both axes. StPageFlip's own "stretch" size
	   mode reads this element's actual on-screen width/height (offsetWidth/
	   offsetHeight) to fit the book — with the flex parent's default
	   align-items: center, this element only ever received its width
	   (100%) and fell back to its JS-set min-height (a fixed, screen-size-
	   independent 300px) for height. That mismatch between a full-width /
	   fixed-tiny-height measuring box and the actual square-ish viewer
	   area was what let the computed page size run past the visible area
	   on some screens and get clipped by .fbm-zoom-viewport's overflow:
	   hidden. Giving it the full box here lets StPageFlip's built-in
	   aspect-ratio-preserving fit (already correct) contain the page
	   fully within the real available space — nothing about the flip
	   engine, DOM rendering mode, or image loading changes. */
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	transform-origin: center center;
	transition: transform 0.18s ease-out;
}
.fbm-overlay.fbm-zoomed .fbm-book-container {
	pointer-events: none; /* let the viewport handle pan-drag while zoomed */
	transition: none;
}
.fbm-zoom-viewport {
	cursor: default;
}
.fbm-overlay.fbm-zoomed .fbm-zoom-viewport {
	cursor: grab;
}

/* Page content: a plain, native-resolution <img> — this is what keeps
   normal view and zoomed view equally sharp (no canvas resampling). */
.fbm-book-container .page {
	background: #1c1c1e;
}
.fbm-book-container .page-content {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #f4f2ee;
}
.fbm-book-container .page-image {
	display: block;
	width: 100%;
	height: 100%;
	/* "contain", not "cover" — a magazine reader must never crop page
	   content. Any (usually sub-pixel) mismatch between an individual
	   page's aspect ratio and the book's overall page slot now simply
	   letterboxes against .page-content's background instead of cutting
	   off text/images at the edges. The <img> itself, its src, and its
	   native resolution are completely unchanged. */
	object-fit: contain;
	-ms-interpolation-mode: bicubic;
	image-rendering: -webkit-optimize-contrast;
	user-select: none;
	-webkit-user-drag: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.fbm-book-container .page-image.fbm-loaded {
	opacity: 1;
}
.fbm-book-container .page-shadow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.12), transparent 6%, transparent 94%, rgba(0, 0, 0, 0.12));
}

/* ==========================================================
   Controls
   ========================================================== */
.fbm-zoom-btn,
.fbm-page-indicator,
.fbm-close-btn {
	position: absolute;
	z-index: 20;
	background: rgba(20, 20, 22, 0.55);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
}
#fbm-overlay-root .fbm-zoom-btn,
#fbm-overlay-root .fbm-page-indicator,
#fbm-overlay-root .fbm-close-btn {
	color: #f4f4f4 !important;
	font-size: 13px !important;
	letter-spacing: 0.02em !important;
}

.fbm-zoom-btn {
	top: 22px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.fbm-zoom-btn:hover {
	background: rgba(40, 40, 44, 0.75);
}
.fbm-zoom-btn.fbm-zoom-active {
	background: rgba(255, 255, 255, 0.92);
}
#fbm-overlay-root .fbm-zoom-btn.fbm-zoom-active {
	color: #17171a !important;
}

.fbm-page-indicator {
	bottom: 22px;
	left: 50%;
	transform: translateX(-50%);
	padding: 8px 18px;
	font-variant-numeric: tabular-nums;
}

.fbm-close-btn {
	top: 22px;
	right: 22px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.fbm-close-btn:hover {
	background: rgba(220, 40, 40, 0.75);
	transform: rotate(90deg);
}

/* Arrows: large, bold, extreme left/right, vertically centered */
.fbm-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(20, 20, 22, 0.5);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.16);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.fbm-arrow:hover {
	background: rgba(255, 255, 255, 0.92);
}
.fbm-arrow:disabled {
	opacity: 0.25;
	cursor: default;
}
.fbm-arrow:disabled:hover {
	background: rgba(20, 20, 22, 0.5);
}
#fbm-overlay-root .fbm-arrow {
	color: #fff !important;
}
#fbm-overlay-root .fbm-arrow:hover {
	color: #17171a !important;
}
#fbm-overlay-root .fbm-arrow:disabled:hover {
	color: #fff !important;
}
.fbm-arrow-left {
	left: 18px;
}
.fbm-arrow-right {
	right: 18px;
}

/* ==========================================================
   Mobile: single page mode, larger touch targets
   ========================================================== */
@media (max-width: 800px) {
	.fbm-arrow {
		width: 46px;
		height: 46px;
	}
	.fbm-arrow-left { left: 8px; }
	.fbm-arrow-right { right: 8px; }
	.fbm-zoom-btn span { display: none; }
	.fbm-zoom-btn { padding: 10px; }
	#fbm-overlay-root .fbm-page-indicator { font-size: 12px !important; padding: 7px 14px; }
	.fbm-close-btn { top: 12px; right: 12px; }
	.fbm-zoom-btn { top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.fbm-overlay, .fbm-book-container, .fbm-launcher, .fbm-launcher-overlay {
		transition: none !important;
	}
}