/*
 * Loaded ONLY on the /report/ endpoint (see class-pr-endpoint.php).
 * Never enqueued on the shop, homepage, or normal product pages.
 * All selectors are scoped under .pr-report-* so nothing here can
 * ever collide with theme or Elementor styles.
 */

/* CSS-level fallback for "no page scroll, only PDF scroll" -- the JS
   in pr-report.js sets this too (document.documentElement / body
   overflow: hidden), but this rule guards against a brief flash of
   scroll before JS runs. Safe globally here because this stylesheet
   is loaded ONLY on the /report/ endpoint (see class-pr-endpoint.php). */
html, body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	height: 100%;
}

/* Fills the space right after the header, edge-to-edge, with no gap
   on top. Height is exactly 100vh (fine-tuned by JS to account for the
   header, so the OUTER page never scrolls) -- only the PDF area below
   scrolls internally. */
.pr-report-overlay {
	position: relative;
	width: 100%;
	height: 100vh;
	background-color: var( --pr-report-bg, #B90707 ); /* swap via theme CSS or override template */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	overflow: hidden;
	touch-action: auto; /* don't let a theme-wide touch-action reset block pinch-zoom here */
}

/* Only this inner box scrolls -- the outer page/body never does. */
.pr-report-scroll {
	position: relative;
	width: 100%;
	max-width: 900px;
	height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;
	background: #f7f7f7;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.2 );
	touch-action: auto;
}

.pr-report-pages {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;

	padding-bottom: 190px; /* just enough to clear the fixed Back button (~168px) + a small buffer */
}

.pr-report-status {
	text-align: center;
	color: #555;
	font-size: 14px;
	padding: 24px 0;
}

/* No PDF text layer is ever created (canvas only), and selection /
   drag / long-press image-save are disabled as an extra deterrent. */
.pr-report-canvas {
	max-width: 100%;
	height: auto;
	display: block;
	background: #fff;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.15 );
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	pointer-events: none;
}

/* Button row (Back to Product + View All Reports), ~70px from the bottom.
   "left" is set by JS so the row is centred on the PDF box, not on the page. */
.pr-report-actions {
	position: fixed;
	left: 70%;
	bottom: 70px;
	transform: translateX( -50% );
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	z-index: 999;
}

.pr-report-back-button {
	display: inline-flex;
	align-items: center;
	opacity: 1;
	border-radius: 792.18px;
	font-family: 'sofia-pro', sans-serif;
	padding-top: 38.02px;
	padding-right: 50.7px;
	padding-bottom: 38.02px;
	padding-left: 50.7px;
	gap: 15.84px;
	font-size: 22px;
	background: #fff;
	color: #601050;
	text-decoration: none;
	text-transform: uppercase;
	box-shadow: none!important;
	white-space: nowrap;
	line-height: 1;
}

.pr-report-actions .pr-report-back-button,
.pr-report-actions .pr-report-back-button:hover,
.pr-report-actions .pr-report-back-button:focus,
.pr-report-actions .pr-report-back-button:visited {
	background: #fff;
	color: #601050;
}

.pr-report-back-button:hover {
	opacity: 0.9;
}

/* ---- Stage: [ left image ][ PDF ][ right image ]  (desktop only) ---- */
.pr-report-stage {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: stretch;
}

.pr-report-stage .pr-report-scroll {
	flex: 0 1 900px;
	width: auto;
	max-width: 900px;
	min-width: 0;
}

/* Side images are hidden everywhere except large desktop screens. */
.pr-report-side {
	display: none;
}

@media ( min-width: 1200px ) {
	.pr-report-side {
		display: flex;
		flex: 1 1 0;
		min-width: 0;
		align-items: center;
		justify-content: center;
		padding: 0;
		box-sizing: border-box;
		overflow: hidden;
	}
	.pr-report-side img {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		max-height: 100%;
		object-fit: contain; /* whole image visible, never cropped (same as the product page) */
		border-radius: 0;
		user-select: none;
		-webkit-user-select: none;
		-webkit-touch-callout: none;
		pointer-events: none;
	}
	.pr-report-side.is-empty img {
		display: none;
	}
}

@media ( max-width: 600px ) {
	.pr-report-actions {
		bottom: 30px;
		gap: 8px;
		width: calc( 100% - 24px );
	}
	.pr-report-back-button {
		padding: 22px 30px;
		font-size: 16px;
		gap: 10px;
		flex: 1 1 0;
		max-width: 260px;
		justify-content: center;
		text-align: center;
		white-space: normal;
		line-height: 1.2;
	}
	.pr-report-pages {
		padding-bottom: 110px; /* just enough to clear the mobile button row + a small buffer */
	}
}