/**
 * WP PDF Editor — Editor UI Styles
 * -----------------------------------------------------------------------
 * Scoped under .wp-pdf-editor-root to avoid leaking into the surrounding
 * theme. Uses a small set of CSS custom properties so a theme (or a
 * future Pro settings screen) can re-skin the editor by overriding a few
 * variables rather than fighting specificity.
 */

.wp-pdf-editor-root {
	--wpe-accent: #2271b1;
	--wpe-accent-hover: #135e96;
	--wpe-border: #dcdcde;
	--wpe-bg: #f6f7f7;
	--wpe-text: #1e1e1e;
	--wpe-muted: #757575;
	--wpe-radius: 8px;

	box-sizing: border-box;
	max-width: 100%;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var( --wpe-text );
}

.wp-pdf-editor-root *,
.wp-pdf-editor-root *::before,
.wp-pdf-editor-root *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------
 * TOOLBAR
 * ------------------------------------------------------------------- */
/* -------------------------------------------------------------------
 * TRUST BAR — "your PDF never leaves your browser" + EN/SW toggle.
 * Sits above the main toolbar; deliberately low-key (small text, muted
 * color) so it reads as a quiet reassurance rather than a banner ad.
 * ---------------------------------------------------------------- */
.wp-pdf-editor-trustbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 12px;
	font-size: 12px;
	color: #5a6472;
	background: #f3f7f5;
	border-bottom: 1px solid #e2e8f0;
}

.wp-pdf-editor-trustbar-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.wp-pdf-editor-trustbar-item .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
	color: #2f9e6e;
}

.wp-pdf-editor-lang-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	font-size: 12px;
	font-weight: 600;
	color: #5a6472;
	background: #ffffff;
	border: 1px solid #d7dee5;
	border-radius: 999px;
	cursor: pointer;
	line-height: 1.4;
}

.wp-pdf-editor-lang-toggle:hover {
	background: #eef2f5;
}

.wp-pdf-editor-lang-toggle .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

@media ( max-width: 640px ) {
	.wp-pdf-editor-trustbar {
		font-size: 11px;
		padding: 6px 8px;
	}

	.wp-pdf-editor-trustbar-item span:not(.dashicons) {
		display: none; /* keep just the lock icon on very small screens */
	}
}

.wp-pdf-editor-template-group {
	display: flex;
	align-items: center;
	gap: 6px;
}

.wp-pdf-editor-template-select {
	padding: 8px 10px;
	border: 1px solid #d7dee5;
	border-radius: 6px;
	font-size: 13px;
	max-width: 220px;
	background: #ffffff;
}

@media ( max-width: 640px ) {
	.wp-pdf-editor-template-select {
		max-width: 140px;
		font-size: 12px;
	}
}

.wp-pdf-editor-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid var( --wpe-border );
	border-radius: var( --wpe-radius ) var( --wpe-radius ) 0 0;
}

.wp-pdf-editor-toolbar-spacer {
	flex: 1 1 auto;
	min-width: 4px;
}

/* Thin vertical rule between logical toolbar groups (upload / annotate
   tools / page tools / nav+zoom / actions) so a crowded toolbar reads
   as clusters instead of one undifferentiated row of buttons. */
.wp-pdf-editor-toolbar-divider {
	align-self: stretch;
	width: 1px;
	margin: 4px 2px;
	background: var( --wpe-border );
	flex: 0 0 auto;
}

@media ( max-width: 640px ) {
	.wp-pdf-editor-toolbar-divider {
		display: none;
	}
}

.wp-pdf-editor-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	color: var( --wpe-text );
	background: #fff;
	border: 1px solid var( --wpe-border );
	border-radius: 6px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
	user-select: none;
}

.wp-pdf-editor-btn .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
	line-height: 1;
}

.wp-pdf-editor-btn:hover:not(:disabled) {
	background: var( --wpe-bg );
	border-color: #c3c4c7;
}

.wp-pdf-editor-btn:active:not(:disabled) {
	transform: translateY( 1px );
}

.wp-pdf-editor-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.wp-pdf-editor-btn--primary {
	color: #fff;
	background: var( --wpe-accent );
	border-color: var( --wpe-accent );
}

.wp-pdf-editor-btn--primary:hover:not(:disabled) {
	background: var( --wpe-accent-hover );
	border-color: var( --wpe-accent-hover );
}

.wp-pdf-editor-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var( --wpe-muted );
}

.wp-pdf-editor-btn--ghost:hover:not(:disabled) {
	background: var( --wpe-bg );
	color: #b32d2e;
}

.wp-pdf-editor-btn--icon {
	padding: 8px 10px;
	font-size: 16px;
}

.wp-pdf-editor-btn--upload {
	color: #fff;
	background: var( --wpe-text );
	border-color: var( --wpe-text );
}

.wp-pdf-editor-btn--upload:hover {
	opacity: 0.9;
}

.wp-pdf-editor-btn.is-active {
	background: var( --wpe-accent );
	border-color: var( --wpe-accent );
	color: #fff;
}

.wp-pdf-editor-btn.is-active .dashicons {
	animation: wpe-pulse 1.4s ease-in-out infinite;
}

@keyframes wpe-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

.wp-pdf-editor-box-color {
	width: 34px;
	height: 34px;
	padding: 2px;
	background: #fff;
	border: 1px solid var( --wpe-border );
	border-radius: 6px;
	cursor: pointer;
}

.wp-pdf-editor-box-color:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.wp-pdf-editor-signature-color {
	width: 34px;
	height: 34px;
	padding: 2px;
	background: #fff;
	border: 1px solid var( --wpe-border );
	border-radius: 6px;
	cursor: pointer;
}

.wp-pdf-editor-signature-width {
	width: 70px;
	cursor: pointer;
}

.wp-pdf-editor-signature-color:disabled,
.wp-pdf-editor-signature-width:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* New markup tools (Highlight / Draw / Shapes) reuse the same visual
   language as the existing box/signature controls above, so they
   don't look bolted-on next to them. */
.wp-pdf-editor-highlight-color,
.wp-pdf-editor-shape-color {
	width: 34px;
	height: 34px;
	padding: 2px;
	background: #fff;
	border: 1px solid var( --wpe-border );
	border-radius: 6px;
	cursor: pointer;
}

.wp-pdf-editor-highlight-color:disabled,
.wp-pdf-editor-shape-color:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.wp-pdf-editor-shape-type {
	height: 34px;
	padding: 0 6px;
	background: #fff;
	border: 1px solid var( --wpe-border );
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	color: inherit;
}

.wp-pdf-editor-shape-type:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.js-delete-selected {
	color: #b32d2e;
	border-color: #f2c9c9;
}

.js-delete-selected:hover:not(:disabled) {
	background: #fbeaea;
	border-color: #e0a3a3;
}

/* Export spinner: swaps the download icon for a spinning ring while
   the PDF is being built, so a slow multi-page export doesn't look
   like a frozen/broken button. */
.wp-pdf-editor-btn.is-loading .dashicons {
	animation: wpe-spin 0.8s linear infinite;
}

@keyframes wpe-spin {
	from { transform: rotate( 0deg ); }
	to { transform: rotate( 360deg ); }
}

/* ---------------------------------------------------------------------
 * PAGE NAVIGATION
 * ------------------------------------------------------------------- */
.wp-pdf-editor-page-nav {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 3px 7px;
	background: var( --wpe-bg );
	border-radius: 6px;
}

.wp-pdf-editor-pages-group {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 3px 7px;
	background: var( --wpe-bg );
	border-radius: 6px;
}

.wp-pdf-editor-thumb-panel {
	border: 1px solid var( --wpe-border );
	border-radius: 8px;
	background: #f7f7f8;
	padding: 10px;
	margin-bottom: 10px;
}

.wp-pdf-editor-thumb-strip {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 4px;
}

.wp-pdf-editor-thumb {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 4px;
	border: 2px solid transparent;
	border-radius: 6px;
	background: #fff;
	cursor: grab;
	user-select: none;
	transition: border-color 0.12s ease, opacity 0.12s ease;
}

.wp-pdf-editor-thumb:hover {
	border-color: var( --wpe-border );
}

.wp-pdf-editor-thumb.is-current {
	border-color: var( --wpe-accent, #2271b1 );
}

.wp-pdf-editor-thumb.is-dragging {
	opacity: 0.4;
}

.wp-pdf-editor-thumb.is-drag-over {
	border-color: var( --wpe-accent, #2271b1 );
	border-style: dashed;
}

.wp-pdf-editor-thumb-canvas {
	display: block;
	max-height: 120px;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.15 );
	pointer-events: none;
}

.wp-pdf-editor-thumb-label {
	font-size: 11px;
	color: var( --wpe-muted );
	font-variant-numeric: tabular-nums;
}

.wp-pdf-editor-page-nav .wp-pdf-editor-btn,
.wp-pdf-editor-zoom-controls .wp-pdf-editor-btn {
	background: transparent;
	border-color: transparent;
}

.wp-pdf-editor-page-nav .wp-pdf-editor-btn:hover:not(:disabled),
.wp-pdf-editor-zoom-controls .wp-pdf-editor-btn:hover:not(:disabled) {
	background: #fff;
	border-color: var( --wpe-border );
}

.wp-pdf-editor-page-indicator {
	min-width: 56px;
	text-align: center;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var( --wpe-muted );
}

.wp-pdf-editor-zoom-controls {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 3px 7px;
	background: var( --wpe-bg );
	border-radius: 6px;
}

.wp-pdf-editor-zoom-indicator {
	min-width: 42px;
	text-align: center;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var( --wpe-muted );
}

.wp-pdf-editor-pro-badge {
	margin-left: 4px;
	padding: 2px 7px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #fff;
	background: linear-gradient( 135deg, #f0b429, #e8590c );
	border-radius: 999px;
}

/* ---------------------------------------------------------------------
 * STATUS LINE
 * ------------------------------------------------------------------- */
.wp-pdf-editor-status {
	min-height: 20px;
	padding: 6px 14px;
	font-size: 13px;
	color: var( --wpe-muted );
	background: #fff;
	border-left: 1px solid var( --wpe-border );
	border-right: 1px solid var( --wpe-border );
}

.wp-pdf-editor-status.is-error {
	color: #b32d2e;
}

.wp-pdf-editor-status.is-success {
	color: #1e7e34;
}

.wp-pdf-editor-btn:focus-visible {
	outline: 2px solid var( --wpe-accent );
	outline-offset: 1px;
}

.wp-pdf-editor-status:empty {
	padding: 0;
	min-height: 0;
	border: none;
}

/* ---------------------------------------------------------------------
 * UPLOAD PROGRESS BAR
 * ------------------------------------------------------------------- */
.wp-pdf-editor-progress {
	height: 4px;
	background: var( --wpe-bg );
	border-left: 1px solid var( --wpe-border );
	border-right: 1px solid var( --wpe-border );
	overflow: hidden;
}

.wp-pdf-editor-progress-bar {
	height: 100%;
	width: 0%;
	background: var( --wpe-accent );
	transition: width 0.15s ease;
}

/* Indeterminate state: used while a file is being read but the browser
   hasn't reported a computable length yet (rare, but FileReader.onprogress
   doesn't guarantee lengthComputable). Sweeps back and forth so the bar
   never looks frozen even without real percentages. */
.wp-pdf-editor-progress.is-indeterminate .wp-pdf-editor-progress-bar {
	width: 30%;
	animation: wpe-progress-sweep 1.1s ease-in-out infinite;
}

@keyframes wpe-progress-sweep {
	0% { margin-left: -30%; }
	100% { margin-left: 100%; }
}

/* ---------------------------------------------------------------------
 * WORKSPACE
 * ------------------------------------------------------------------- */
.wp-pdf-editor-workspace {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	height: var( --wp-pdf-editor-height, 720px );
	overflow: auto;
	padding: 28px;
	background: var( --wpe-bg );
	background-image: linear-gradient( 45deg, #ececec 25%, transparent 25% ),
		linear-gradient( -45deg, #ececec 25%, transparent 25% ),
		linear-gradient( 45deg, transparent 75%, #ececec 75% ),
		linear-gradient( -45deg, transparent 75%, #ececec 75% );
	background-size: 22px 22px;
	background-position: 0 0, 0 11px, 11px -11px, -11px 0;
	border: 1px solid var( --wpe-border );
	border-top: none;
	border-radius: 0 0 var( --wpe-radius ) var( --wpe-radius );
}

.wp-pdf-editor-empty-state {
	margin: auto;
	text-align: center;
	color: var( --wpe-muted );
	padding: 48px 56px;
	background: #fff;
	border: 2px dashed var( --wpe-border );
	border-radius: var( --wpe-radius );
}

.wp-pdf-editor-empty-state-icon.dashicons {
	width: 44px;
	height: 44px;
	font-size: 44px;
	color: var( --wpe-accent );
	opacity: 0.85;
}

.wp-pdf-editor-empty-state-title {
	margin: 14px 0 0;
	font-size: 15px;
	font-weight: 600;
	color: var( --wpe-text );
}

.wp-pdf-editor-empty-state-subtitle {
	margin: 4px 0 0;
	font-size: 13px;
	color: var( --wpe-muted );
}

.wp-pdf-editor-canvas-stack {
	position: relative;
	display: inline-block;
	line-height: 0; /* prevents inline-canvas baseline whitespace gap */
	flex: 0 0 auto;
	/* Base state for the swipe/slide page-turn animation in app-editor.js
	 * (onSwipeTouchMove / slideToPage). JS toggles transform, opacity and
	 * transition inline on top of this; will-change just hints the
	 * browser to keep this layer composited during the drag so the
	 * "follow the finger" feedback doesn't feel laggy. */
	transform: translateX( 0 );
	opacity: 1;
	will-change: transform, opacity;
	touch-action: pan-y; /* let vertical scroll through; we handle horizontal ourselves */
}

.wp-pdf-editor-canvas {
	display: block;
}

.wp-pdf-editor-canvas--pdf {
	background: #fff;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.18 );
}

/*
 * Fabric.js wraps the overlay <canvas> in its own `.canvas-container`
 * (holding a lower + upper canvas pair for interaction). This pins that
 * wrapper exactly on top of the PDF.js render canvas beneath it.
 */
.wp-pdf-editor-canvas-stack .canvas-container {
	position: absolute !important;
	top: 0;
	left: 0;
}

/* ---------------------------------------------------------------------
 * RESPONSIVE
 * ------------------------------------------------------------------- */
@media ( max-width: 640px ) {
	.wp-pdf-editor-toolbar {
		gap: 6px;
		padding: 8px;
	}

	.wp-pdf-editor-btn-label {
		display: none;
	}

	/* Touch-target sizing: Apple/WCAG guidance is a 44x44px minimum hit
	   area. The desktop icon-only buttons were comfortably clickable
	   with a mouse but too cramped for a thumb — this is the single
	   biggest real-world mobile-usability fix for this toolbar. */
	.wp-pdf-editor-btn {
		padding: 10px;
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.wp-pdf-editor-btn .dashicons {
		font-size: 20px;
		width: 20px;
		height: 20px;
	}

	/* Color/range pickers and the shape <select> are also too fiddly at
	   default sizing on a touchscreen. */
	input[type="color"].wp-pdf-editor-signature-color,
	input[type="color"].wp-pdf-editor-box-color,
	input[type="color"].wp-pdf-editor-highlight-color,
	input[type="color"].wp-pdf-editor-shape-color {
		width: 40px;
		height: 40px;
	}

	.wp-pdf-editor-shape-type {
		min-height: 44px;
		font-size: 14px;
	}

	.wp-pdf-editor-page-nav .wp-pdf-editor-btn,
	.wp-pdf-editor-zoom-controls .wp-pdf-editor-btn {
		min-width: 40px;
		min-height: 40px;
	}

	.wp-pdf-editor-toolbar-spacer {
		flex-basis: 100%;
		height: 0;
	}

	.wp-pdf-editor-workspace {
		padding: 10px;
	}

	/* The pages thumbnail strip and canvas need to be pinch/scroll
	   friendly rather than fixed-width on small viewports. */
	.wp-pdf-editor-thumb-strip {
		-webkit-overflow-scrolling: touch;
	}

	.wp-pdf-editor-canvas-stack {
		touch-action: pan-x pan-y;
	}
}

/* -------------------------------------------------------------------
 * WORD-EDIT MODE ([pdf_word_editor]) — added v1.4.0.
 * Reuses .wp-pdf-editor-workspace / .wp-pdf-editor-empty-state from the
 * annotate-mode styles above; this only adds the TinyMCE wrapper.
 * ---------------------------------------------------------------- */
.wp-pdf-word-editor-textarea-wrap {
	width: 100%;
	height: 100%;
}

.wp-pdf-word-editor-textarea-wrap textarea {
	width: 100%;
	height: var( --wp-pdf-editor-height, 720px );
}

/* -------------------------------------------------------------------
 * WORD-EDIT MODE — PAGE VIEW + PAGE-TRANSITION ANIMATIONS (added v2.1.0)
 * -----------------------------------------------------------------------
 * The TinyMCE document itself renders in an iframe, so the "sheet on a
 * gray canvas" look (body styling, .wpe-page-break gutters) is injected
 * via TinyMCE's `content_style` in app-word-editor.js — it has to live
 * INSIDE the iframe's own stylesheet, this file can't reach in there.
 * What lives out here is the chrome around it: the gray editing canvas,
 * the page-navigator bar, and the transform/opacity keyframes that play
 * on the iframe element itself when Prev/Next Page is used.
 * ---------------------------------------------------------------- */

.wp-pdf-word-editor-root .tox.tox-tinymce {
	border-radius: var( --wpe-radius );
	overflow: hidden;
}

.wp-pdf-word-editor-root .tox .tox-edit-area {
	background: #e8eaec;
	perspective: 1600px;
}

.wp-pdf-word-editor-root .tox .tox-edit-area iframe {
	transform-style: preserve-3d;
	backface-visibility: hidden;
}

/* Page navigator bar (Page N of M + Prev/Next + transition-style picker) */
.wp-pdf-word-editor-pagebar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	background: #fff;
	border: 1px solid var( --wpe-border );
	border-top: none;
	border-radius: 0 0 var( --wpe-radius ) var( --wpe-radius );
	font-size: 13px;
}

.wp-pdf-word-editor-page-indicator {
	min-width: 92px;
	text-align: center;
	color: var( --wpe-text );
	font-weight: 500;
}

.wp-pdf-word-editor-pagebar-spacer {
	flex: 1 1 auto;
}

.wp-pdf-word-editor-anim-label {
	display: flex;
	align-items: center;
	gap: 4px;
	color: var( --wpe-muted );
	white-space: nowrap;
}

.wp-pdf-word-editor-anim-select {
	border: 1px solid var( --wpe-border );
	border-radius: 6px;
	padding: 5px 8px;
	font-size: 13px;
	background: #fff;
	color: var( --wpe-text );
}

/* --- Page-turn transitions, played on the TinyMCE iframe element ---- */

@keyframes wpe-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes wpe-fade-in { from { opacity: 0; } to { opacity: 1; } }
.wpe-anim-fade-out-forward,
.wpe-anim-fade-out-backward { animation: wpe-fade-out .2s ease forwards; }
.wpe-anim-fade-in-forward,
.wpe-anim-fade-in-backward { animation: wpe-fade-in .25s ease forwards; }

@keyframes wpe-slide-out-forward { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-26px); opacity: 0; } }
@keyframes wpe-slide-in-forward { from { transform: translateY(26px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes wpe-slide-out-backward { from { transform: translateY(0); opacity: 1; } to { transform: translateY(26px); opacity: 0; } }
@keyframes wpe-slide-in-backward { from { transform: translateY(-26px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.wpe-anim-slide-out-forward { animation: wpe-slide-out-forward .2s ease forwards; }
.wpe-anim-slide-in-forward { animation: wpe-slide-in-forward .25s ease forwards; }
.wpe-anim-slide-out-backward { animation: wpe-slide-out-backward .2s ease forwards; }
.wpe-anim-slide-in-backward { animation: wpe-slide-in-backward .25s ease forwards; }

/* "Flip" is a stylized rotateY page-turn on the whole editing pane — not
 * a literal per-sheet flip (the document still reflows as one continuous
 * column), but it reads as a page turn since it's timed to the jump. */
@keyframes wpe-flip-out-forward { from { transform: rotateY(0deg); opacity: 1; } to { transform: rotateY(-16deg); opacity: 0; } }
@keyframes wpe-flip-in-forward { from { transform: rotateY(16deg); opacity: 0; } to { transform: rotateY(0deg); opacity: 1; } }
@keyframes wpe-flip-out-backward { from { transform: rotateY(0deg); opacity: 1; } to { transform: rotateY(16deg); opacity: 0; } }
@keyframes wpe-flip-in-backward { from { transform: rotateY(-16deg); opacity: 0; } to { transform: rotateY(0deg); opacity: 1; } }
.wpe-anim-flip-out-forward { animation: wpe-flip-out-forward .2s ease-in forwards; transform-origin: left center; }
.wpe-anim-flip-in-forward { animation: wpe-flip-in-forward .25s ease-out forwards; transform-origin: right center; }
.wpe-anim-flip-out-backward { animation: wpe-flip-out-backward .2s ease-in forwards; transform-origin: right center; }
.wpe-anim-flip-in-backward { animation: wpe-flip-in-backward .25s ease-out forwards; transform-origin: left center; }

@media ( max-width: 600px ) {
	.wp-pdf-word-editor-pagebar {
		flex-wrap: wrap;
	}
	.wp-pdf-word-editor-anim-label {
		order: 3;
	}
}

/* -------------------------------------------------------------------
 * BATCH MODE ([pdf_batch]) — added v2.3.0.
 * Deliberately its own simple list UI rather than reusing the canvas
 * workspace styles above: batch mode has no page rendering, just a
 * file list + toolbar, so it doesn't need the workspace/zoom/thumbnail
 * machinery at all.
 * ---------------------------------------------------------------- */
.wp-pdf-batch-root {
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	overflow: hidden;
	background: #ffffff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.wp-pdf-batch-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
}

.wp-pdf-batch-op-label {
	font-size: 13px;
	color: #5a6472;
	font-weight: 600;
}

.wp-pdf-batch-op {
	padding: 8px 10px;
	border: 1px solid #d7dee5;
	border-radius: 6px;
	font-size: 13px;
	background: #ffffff;
}

.wp-pdf-batch-watermark-options {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.wp-pdf-batch-watermark-text {
	padding: 8px 10px;
	border: 1px solid #d7dee5;
	border-radius: 6px;
	font-size: 13px;
	min-width: 200px;
}

.wp-pdf-batch-watermark-position {
	padding: 8px 10px;
	border: 1px solid #d7dee5;
	border-radius: 6px;
	font-size: 13px;
	background: #ffffff;
}

.wp-pdf-batch-opacity-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #5a6472;
}

.wp-pdf-batch-filelist-wrap {
	position: relative;
	max-height: var( --wp-pdf-batch-height, 480px );
	overflow-y: auto;
	padding: 8px;
}

.wp-pdf-batch-filelist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wp-pdf-batch-filelist-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border: 1px solid #edf1f4;
	border-radius: 8px;
	background: #fafcfd;
}

.wp-pdf-batch-filelist-name {
	flex: 1;
	font-size: 13px;
	color: #1f2937;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wp-pdf-batch-filelist-size {
	font-size: 12px;
	color: #8892a0;
	flex-shrink: 0;
}

.wp-pdf-batch-filelist-remove {
	border: none;
	background: transparent;
	color: #b0392a;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 2px 6px;
	border-radius: 4px;
	flex-shrink: 0;
}

.wp-pdf-batch-filelist-remove:hover {
	background: #fbe9e7;
}

.wp-pdf-batch-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 40px 16px;
	color: #8892a0;
	text-align: center;
}

.wp-pdf-batch-empty-state[hidden] {
	display: none;
}

.wp-pdf-batch-empty-state .dashicons {
	font-size: 32px;
	width: 32px;
	height: 32px;
	opacity: 0.5;
}

@media ( max-width: 640px ) {
	.wp-pdf-batch-toolbar {
		gap: 6px;
		padding: 8px;
	}

	.wp-pdf-batch-watermark-text {
		min-width: 0;
		flex: 1 1 100%;
	}
}