/*
 * Normal PDF viewer styles.
 *
 * @package JezPress\PdfEmbedder
 * @since   1.0.0
 */

.jppe-normal-viewer {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #525659;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.3 );
	position: relative;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Toolbar */
.jppe-normal-viewer .jppe-toolbar {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px;
	background: #3d4043;
	flex-shrink: 0;
	flex-wrap: wrap;
}

.jppe-normal-viewer .jppe-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 3px;
	color: #d0d0d0;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	text-decoration: none;
}

.jppe-normal-viewer .jppe-btn:hover:not( :disabled ) {
	background: var( --jppe-accent, #2563eb );
	border-color: var( --jppe-accent, #2563eb );
	color: #fff;
}

.jppe-normal-viewer .jppe-btn:focus-visible {
	outline: 2px solid var( --jppe-accent, #2563eb );
	outline-offset: 1px;
}

.jppe-normal-viewer .jppe-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.jppe-normal-viewer .jppe-page-info {
	display: flex;
	align-items: center;
	gap: 4px;
	color: #d0d0d0;
	font-size: 13px;
}

.jppe-normal-viewer .jppe-page-num {
	width: 40px;
	text-align: center;
	background: #525659;
	border: 1px solid #6b6f73;
	border-radius: 3px;
	color: #fff;
	padding: 3px 4px;
	font-size: 13px;
}

.jppe-normal-viewer .jppe-page-sep,
.jppe-normal-viewer .jppe-page-count {
	color: #a0a0a0;
}

.jppe-normal-viewer .jppe-zoom-level {
	color: #d0d0d0;
	font-size: 13px;
	min-width: 40px;
	text-align: center;
}

.jppe-normal-viewer .jppe-toolbar-sep {
	width: 1px;
	height: 24px;
	background: rgba( 255, 255, 255, 0.15 );
	margin: 0 4px;
}

/* Canvas area */
.jppe-normal-viewer .jppe-canvas-container {
	flex: 1;
	overflow: auto;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 16px;
	background: #525659;
	position: relative;
}

.jppe-normal-viewer .jppe-canvas {
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.4 );
	display: block;
	max-width: 100%;
}

/* Loading / error */
.jppe-normal-viewer .jppe-loading,
.jppe-normal-viewer .jppe-error {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #d0d0d0;
	font-size: 14px;
	background: #525659;
}

.jppe-normal-viewer .jppe-error {
	color: #f87171;
}

/* The display:flex above otherwise overrides the [hidden] attribute the JS
   toggles, so the error must be explicitly hidden when not active. */
.jppe-normal-viewer .jppe-loading[hidden],
.jppe-normal-viewer .jppe-error[hidden] {
	display: none;
}

/* Responsive: auto-height by page orientation. The viewer hugs its content,
   the canvas fills the available width, and the height follows the PDF page's
   intrinsic aspect ratio (landscape renders short, portrait renders tall). */
.jppe-normal-viewer[data-responsive="1"] {
	height: auto !important;
}

.jppe-normal-viewer[data-responsive="1"] .jppe-canvas-container {
	flex: 0 0 auto;
	overflow: visible;
}

.jppe-normal-viewer[data-responsive="1"] .jppe-canvas {
	width: 100%;
	height: auto;
}

/* Fullscreen state */
.jppe-normal-viewer:fullscreen {
	border-radius: 0;
}

/* In fullscreen the responsive auto-height would collapse the viewer, so
   restore a filled layout. */
.jppe-normal-viewer[data-responsive="1"]:fullscreen {
	height: 100% !important;
}

.jppe-normal-viewer[data-responsive="1"]:fullscreen .jppe-canvas-container {
	flex: 1;
	overflow: auto;
}

.jppe-normal-viewer[data-responsive="1"]:fullscreen .jppe-canvas {
	width: auto;
	max-width: 100%;
}