/**
 * Popup for flipbooks and videos (assets/js/flipbook-modal.js).
 * Loads with the script, on pages that have a demo preview, a demo book or the hero play button.
 */

html.pf-fbm-open { overflow: hidden; scroll-behavior: auto; }
html.pf-fbm-open body { padding-right: var(--pf-fbm-gutter, 0px); }
.pf-demo-thumb a, .pf-book.has-popup { cursor: zoom-in; }
.pf-demo-item.has-popup .pf-demo-item__label { cursor: pointer; }

.pf-fbm {
	box-sizing: border-box;
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: clamp(10px, 1.5vw, 24px);
	border: 0;
	background: transparent;
	overflow: hidden;
}
/* Closed: hidden, whatever other stylesheets say. Some plugins load old CSS resets with
   "dialog { display: block }" that would otherwise leave the closed popup covering the page. */
.pf-fbm:not([open]) { display: none !important; }
.pf-fbm[open] { display: flex; align-items: center; justify-content: center; }
.pf-fbm::backdrop { background: transparent; }
.pf-fbm__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 26, 47, 0.55);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.pf-fbm__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 30px 70px -20px rgba(10, 26, 47, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
	transform-origin: center;
	will-change: transform, opacity;
}

.pf-fbm__bar {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 6px 4px 18px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.pf-fbm .pf-fbm__title {
	flex: 1;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	color: var(--wp--preset--color--neutral);
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.3px;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.pf-fbm__btn {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--wp--preset--color--neutral);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.35s var(--pf-ease);
}
.pf-fbm__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf-fbm__btn:hover { background: var(--wp--preset--color--light); color: var(--wp--preset--color--brand); }
.pf-fbm__close:hover { transform: rotate(90deg); }
.pf-fbm__btn:active { transform: scale(0.92); }
.pf-fbm__btn:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 1px; }

.pf-fbm__stage { position: relative; flex: 1; min-height: 0; background: var(--wp--preset--color--light); }
.pf-fbm__poster,
.pf-fbm__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pf-fbm__poster { object-fit: cover; filter: blur(14px) saturate(1.1); opacity: 0.5; transform: scale(1.08); transition: opacity 0.5s ease; }
.pf-fbm__frame { opacity: 0; transition: opacity 0.6s ease; }
.pf-fbm__loader {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: var(--wp--preset--color--neutral);
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 500;
	transition: opacity 0.35s ease;
}
.pf-fbm__loader em { font-style: normal; }
.pf-fbm__loader span {
	width: 34px;
	height: 34px;
	border: 3px solid rgba(10, 26, 47, 0.12);
	border-top-color: var(--wp--preset--color--brand);
	border-radius: 50%;
	animation: pf-fbm-spin 0.8s linear infinite;
}
.pf-fbm.is-loaded .pf-fbm__frame { opacity: 1; }
.pf-fbm.is-loaded .pf-fbm__poster,
.pf-fbm.is-loaded .pf-fbm__loader { opacity: 0; pointer-events: none; }
@keyframes pf-fbm-spin { to { transform: rotate(360deg); } }

/* Video: a 16:9 player as large as the screen allows, the close button above it */
.pf-fbm.is-video { padding: clamp(56px, 6vw, 80px) clamp(10px, 4vw, 64px); }
.pf-fbm.is-video .pf-fbm__panel {
	width: min(1280px, 100%, (100dvh - 2 * clamp(56px, 6vw, 80px)) * 16 / 9);
	height: auto;
	aspect-ratio: 16 / 9;
	overflow: visible;
	background: #000;
}
.pf-fbm.is-video .pf-fbm__stage { overflow: hidden; border-radius: inherit; background: #000; }
.pf-fbm.is-video > .pf-fbm__bar { position: absolute; top: clamp(10px, 1.5vw, 20px); right: clamp(10px, 1.5vw, 20px); z-index: 1; padding: 0; border: 0; }
.pf-fbm.is-video .pf-fbm__title { display: none; }
.pf-fbm.is-video .pf-fbm__btn { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; }
.pf-fbm.is-video .pf-fbm__btn:hover { background: #fff; color: var(--wp--preset--color--neutral); }
.pf-fbm.is-video .pf-fbm__poster { filter: blur(10px) brightness(0.6); opacity: 1; }
.pf-fbm.is-video .pf-fbm__loader { color: #fff; }
.pf-fbm.is-video .pf-fbm__loader span { border-color: rgba(255, 255, 255, 0.2); border-top-color: #fff; }

@media (max-width: 600px) {
	.pf-fbm__panel { border-radius: 12px; }
	.pf-fbm__bar { padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.pf-fbm__close:hover { transform: none; }
	.pf-fbm__loader span { animation-duration: 2s; }
}