/* Overlay for the full-document PDF preview. Deliberately small: the viewer inside the frame brings
   its own interface, so there is nothing to style here beyond the window it sits in. */
.vanupfi_pdf_preview_overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* Above the WordPress admin bar (99999) and the admin menu, so the preview is not framed by them
	   when it is opened from the order screen. */
	z-index: 100000;
	background: rgba(0, 0, 0, .75);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 58px 24px 24px 24px;
	box-sizing: border-box;
}
.vanupfi_pdf_preview_frame_holder {
	position: relative;
	width: 100%;
	height: 100%;
	max-width: 1100px;
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
.vanupfi_pdf_preview_frame {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.vanupfi_pdf_preview_close {
	/* Anchored to the overlay, which is fixed, so these coordinates are screen coordinates. Sitting in
	   the strip of backdrop above the document keeps it clear of the viewer's own toolbar, which owns
	   the top right corner of the frame. */
	position: absolute;
	top: 12px;
	right: 24px;
	width: 34px;
	height: 34px;
	padding: 0;
	line-height: 32px;
	text-align: center;
	font-size: 22px;
	color: #fff;
	background: rgba(0, 0, 0, .55);
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 50%;
	cursor: pointer;
	opacity: .9;
}
.vanupfi_pdf_preview_close:hover {
	opacity: 1;
	background: rgba(0, 0, 0, .8);
}
/* The WordPress admin bar keeps its own place at the top of the screen, so the strip the close button
   lives in has to start below it - otherwise the button is hidden underneath. 32px on the desktop bar,
   46px on the taller one WordPress switches to on narrow screens. */
body.admin-bar .vanupfi_pdf_preview_overlay {
	padding-top: 90px;
}
body.admin-bar .vanupfi_pdf_preview_close {
	top: 44px;
}
/* The page behind must not scroll while the overlay is open: on a phone the two scroll areas fight
   each other and the document jumps under the finger. */
body.vanupfi_pdf_preview_open {
	overflow: hidden;
}
@media screen and (max-width: 782px) {
	.vanupfi_pdf_preview_overlay {
		padding: 52px 8px 8px 8px;
	}
	.vanupfi_pdf_preview_close {
		right: 8px;
	}
	body.admin-bar .vanupfi_pdf_preview_overlay {
		padding-top: 104px;
	}
	body.admin-bar .vanupfi_pdf_preview_close {
		top: 58px;
	}
}