/* ============================================================
   PDF Presentation – Stylesheet  (RTL / Hebrew-ready)
   Colors are driven by CSS custom properties set inline by PHP.
   Defaults mirror PDFPRES_DEFAULT_* constants in the plugin.
   ============================================================ */

/* ── Frontend viewer wrapper ─────────────────────────────── */

.pdfpres-wrapper {
	/* Defaults — overridden per-block via inline style */
	--pdfpres-bg:  #f3f4f6;
	--pdfpres-btn: #2d6a4f;
	--pdfpres-txt: #1a202c;

	display: flex;
	flex-direction: column;
	align-items: center;
	background: var( --pdfpres-bg );
	border-radius: 12px;
	padding: 24px 20px 20px;
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.10 );
	font-family: 'Segoe UI', Arial, sans-serif;
	box-sizing: border-box;
	outline: none;
	color: var( --pdfpres-txt );
}

/* ── Canvas area ─────────────────────────────────────────── */

.pdfpres-canvas-wrap {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	min-height: 120px;
}

.pdfpres-canvas {
	display: block;
	max-width: 100%;
	border-radius: 6px;
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.15 );
	background: #fff;
}

/* Loading spinner */
.pdfpres-loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #6b7280;
	font-size: 1rem;
}

.pdfpres-loading::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 3px solid #d1d5db;
	border-top-color: var( --pdfpres-btn );
	border-radius: 50%;
	animation: pdfpres-spin 0.75s linear infinite;
	margin-inline-end: 10px;
}

@keyframes pdfpres-spin {
	to { transform: rotate( 360deg ); }
}

/* Error */
.pdfpres-error-msg {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #dc2626;
	font-size: 0.95rem;
	padding: 16px;
	text-align: center;
	direction: rtl;
}

.pdfpres-error { color: #dc2626; direction: rtl; }

/* ── Navigation bar ──────────────────────────────────────── */

.pdfpres-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 560px;
	margin-top: 16px;
	gap: 10px;
}

/* ── Buttons ─────────────────────────────────────────────── */

.pdfpres-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 20px;
	background: var( --pdfpres-btn );
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 0.95rem;
	font-family: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.15s, transform 0.1s;
	user-select: none;
}

.pdfpres-btn:hover:not( :disabled ) {
	filter: brightness( 1.12 );
	transform: translateY( -1px );
}

.pdfpres-btn:active:not( :disabled ) {
	transform: translateY( 0 );
	filter: brightness( 0.95 );
}

.pdfpres-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.pdfpres-arrow { font-size: 1.1em; line-height: 1; }

/* ── Page counter ────────────────────────────────────────── */

.pdfpres-counter {
	color: var( --pdfpres-txt );
	font-size: 0.9rem;
	white-space: nowrap;
	direction: rtl;
	min-width: 80px;
	text-align: center;
	opacity: 0.85;
}

.pdfpres-current {
	color: var( --pdfpres-btn );
	font-weight: 700;
	font-size: 1.05em;
}

/* ── Zoom controls ───────────────────────────────────────── */

.pdfpres-zoom {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-inline-start: auto;
}

.pdfpres-zoom-btn {
	width: 30px;
	height: 30px;
	border: 1.5px solid var( --pdfpres-btn );
	border-radius: 6px;
	background: transparent;
	color: var( --pdfpres-btn );
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pdfpres-zoom-btn:hover:not( :disabled ) {
	background: var( --pdfpres-btn );
	color: #fff;
}

.pdfpres-zoom-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.pdfpres-zoom-level {
	font-size: 0.8rem;
	min-width: 42px;
	text-align: center;
	color: var( --pdfpres-txt );
	opacity: 0.75;
	user-select: none;
}

/* ── Responsive ──────────────────────────────────────────── */

@media ( max-width: 480px ) {
	.pdfpres-wrapper { padding: 14px 10px; }
	.pdfpres-btn     { padding: 7px 13px; font-size: 0.88rem; }
}


/* ============================================================
   Gutenberg editor styles
   ============================================================ */

/* ── Placeholder (empty / drag state) ────────────────────── */

.pdfpres-ph {
	border: 2px dashed #d1d5db;
	border-radius: 10px;
	padding: 28px 20px 22px;
	text-align: center;
	direction: rtl;
	transition: border-color 0.18s, background 0.18s;
	background: #fafafa;
}

.pdfpres-ph.is-dragging {
	border-color: #2d6a4f;
	background: rgba( 45, 106, 79, 0.05 );
}

.pdfpres-ph-icon  { font-size: 2.4rem; line-height: 1; margin-bottom: 8px; }
.pdfpres-ph-title { font-weight: 700; font-size: 1rem; margin: 0 0 16px; color: #111827; }
.pdfpres-ph-hint  { margin: 14px 0 0; color: #9ca3af; font-size: 0.82rem; }

/* URL input row */
.pdfpres-url-row {
	display: flex;
	gap: 8px;
	justify-content: center;
	align-items: center;
	margin-bottom: 14px;
}

.pdfpres-url-input {
	flex: 1;
	max-width: 320px;
	padding: 7px 11px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 0.88rem;
	direction: rtl;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.pdfpres-url-input:focus {
	border-color: #2d6a4f;
	box-shadow: 0 0 0 2px rgba( 45, 106, 79, 0.15 );
}

/* Divider */
.pdfpres-divider {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 12px auto;
	color: #9ca3af;
	font-size: 0.82rem;
	max-width: 260px;
}

.pdfpres-divider::before,
.pdfpres-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: #e5e7eb;
}

/* Uploading */
.pdfpres-uploading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px;
	direction: rtl;
	color: #6b7280;
}

/* ── Ready card ──────────────────────────────────────────── */

.pdfpres-ready {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: #f0fdf4;
	border: 1.5px solid #86efac;
	border-radius: 10px;
	direction: rtl;
	transition: background 0.2s, border-color 0.2s;
}

.pdfpres-ready-icon { font-size: 2rem; flex-shrink: 0; }

.pdfpres-ready-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.pdfpres-ready-name {
	font-size: 0.8rem;
	color: #6b7280;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pdfpres-ready-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ── Color picker UI (sidebar) ───────────────────────────── */

.pdfpres-color-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 4px 0;
}

.pdfpres-color-label {
	font-size: 0.85rem;
	color: #374151;
}

.pdfpres-color-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 3px 8px 3px 5px;
	cursor: pointer;
	font-size: 0.78rem;
	color: #374151;
	transition: border-color 0.15s;
}

.pdfpres-color-toggle:hover { border-color: #9ca3af; }

.pdfpres-color-hex {
	font-family: monospace;
	letter-spacing: 0.02em;
}