/**
 * IMS PDF Viewer — modern retheme
 *
 * Shares the same visual language as the rest of the redesigned site:
 *   - Dark #111 chrome with subtle shadow/border
 *   - Rounded "pill" buttons, 6-8px radius
 *   - Gold (#FAB000) accent for active states + catalog nav bar
 *   - Inline SVG icons (dashicons dependency removed)
 *   - Neutral slate canvas backdrop (#262626) instead of muddy greys
 *
 * All element IDs and base class names (#pdf-viewer-container, .pdf-btn,
 * .pdf-catalog-btn, .pdf-page-container, .pdf-canvas, #pdf-loading, etc.)
 * are unchanged so the existing pdf-viewer.js binding continues to work.
 *
 * @package IMS_by_Soul_Country
 */

/* ==========================================================================
   Host page
   ========================================================================== */

body.page-template-page-pdf-viewer {
	margin: 0;
	overflow: hidden;
	font-family: var(--wp--preset--font-family--system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}

#pdf-viewer-container {
	position: fixed;
	inset: 0;
	background: #1a1a1a;
	display: flex;
	flex-direction: column;
	z-index: 999999;
	color: #e5e7eb;
	font-family: inherit;
}

/* ==========================================================================
   Toolbar
   ========================================================================== */

/* Toolbars are kept as shallow as possible so the PDF canvas gets the
   maximum vertical real estate. Button heights drive the bar height
   (28px) with just 4px of vertical padding around them. */
#pdf-viewer-toolbar {
	background: #111111;
	color: #ffffff;
	padding: 4px 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	flex-shrink: 0;
}

.toolbar-left,
.toolbar-center,
.toolbar-right {
	display: flex;
	align-items: center;
	gap: 4px;
}

.toolbar-right {
	gap: 6px;
}

/* --- Buttons ------------------------------------------------------------ */

.pdf-btn {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: #ffffff;
	padding: 4px 10px;
	height: 28px;
	cursor: pointer;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-family: inherit;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.pdf-btn svg {
	width: 13px;
	height: 13px;
}

.pdf-btn:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.18);
}

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

.pdf-btn:focus-visible {
	outline: 2px solid var(--color-cta, #FAB000);
	outline-offset: 2px;
}

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

.pdf-btn.active {
	background: var(--color-cta, #FAB000);
	border-color: var(--color-cta, #FAB000);
	color: #111111;
}

/* Icon-only variant — square footprint so arrow/zoom buttons look balanced. */
.pdf-btn--icon {
	padding: 0;
	width: 28px;
	height: 28px;
}

/* Close button uses a subtle red hover to signal the destructive action
   without introducing a saturated red into the default chrome. */
.pdf-btn--danger:hover:not(:disabled) {
	background: rgba(220, 38, 38, 0.15);
	border-color: rgba(220, 38, 38, 0.4);
	color: #fecaca;
}

.pdf-btn svg {
	flex-shrink: 0;
}

/* --- Readouts (page x/y, zoom %) ---------------------------------------- */

.pdf-readout {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #ffffff;
	font-family: inherit;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	min-width: 48px;
	justify-content: center;
	padding: 0 4px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pdf-readout__sep {
	color: rgba(255, 255, 255, 0.4);
	font-weight: 400;
}

/* Zoom group — visually bundles the - / % / + controls into one pill. */
.pdf-zoom-group {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	padding: 1px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 7px;
	height: 28px;
}

.pdf-zoom-group .pdf-btn {
	border: none;
	background: transparent;
	width: 24px;
	height: 24px;
	padding: 0;
}

.pdf-zoom-group .pdf-btn svg {
	width: 12px;
	height: 12px;
}

.pdf-zoom-group .pdf-btn:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.1);
}

.pdf-zoom-group #pdf-zoom-level {
	min-width: 34px;
	font-size: 10px;
}

/* ==========================================================================
   Catalog nav bar (secondary toolbar, gold)
   ========================================================================== */

#pdf-catalog-nav {
	background: var(--color-cta, #FAB000);
	color: #111111;
	padding: 4px 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.pdf-catalog-btn {
	background: #111111;
	border: 1px solid #111111;
	color: #ffffff;
	padding: 4px 10px;
	height: 26px;
	cursor: pointer;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: inherit;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background 0.15s, border-color 0.15s, transform 0.05s;
	white-space: nowrap;
}

.pdf-catalog-btn svg {
	width: 12px;
	height: 12px;
}

.pdf-catalog-btn:hover:not(:disabled) {
	background: #1f1f1f;
	border-color: #1f1f1f;
}

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

.pdf-catalog-btn:focus-visible {
	outline: 2px solid #111111;
	outline-offset: 2px;
}

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

#pdf-catalog-info {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #111111;
	font-weight: 700;
	font-size: 11px;
}

.pdf-catalog-info__label {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 10px;
	opacity: 0.85;
}

.pdf-catalog-info__value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #111111;
	color: var(--color-cta, #FAB000);
	padding: 2px 8px;
	border-radius: 20px;
	font-size: 11px;
	min-width: 28px;
	line-height: 1.4;
}

/* ==========================================================================
   Canvas / page viewport
   ========================================================================== */

#pdf-viewer-canvas-container {
	flex: 1;
	overflow: auto;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 24px;
	gap: 16px;
	background: #262626;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x pan-y;
	position: relative;
}

/* Thin modern scrollbars — Chromium/Safari */
#pdf-viewer-canvas-container::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

#pdf-viewer-canvas-container::-webkit-scrollbar-track {
	background: transparent;
}

#pdf-viewer-canvas-container::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.15);
	border-radius: 10px;
	border: 2px solid transparent;
	background-clip: padding-box;
}

#pdf-viewer-canvas-container::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.3);
	background-clip: padding-box;
}

/* Firefox */
#pdf-viewer-canvas-container {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.pdf-page-container {
	position: relative;
	display: inline-block;
	background: #ffffff;
	border-radius: 4px;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.25),
		0 10px 30px rgba(0, 0, 0, 0.45);
	touch-action: none;
	flex-shrink: 0;
	vertical-align: top;
	overflow: hidden;
	transition: opacity 0.2s ease-in;
}

.pdf-page-container.pdf-page-loading {
	opacity: 0;
}

.pdf-page-container.pdf-page-loaded {
	opacity: 1;
}

.pdf-canvas {
	background: white;
	display: block;
	max-width: none;
	height: auto;
	border-radius: 4px;
}

/* ==========================================================================
   Annotation layer (clickable hotspots inside the PDF)
   ========================================================================== */

.annotationLayer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	opacity: 1;
	line-height: 1;
	z-index: 10;
	pointer-events: none;
}

.annotationLayer section {
	position: absolute;
	text-align: initial;
	pointer-events: auto;
}

.annotationLayer .linkAnnotation {
	pointer-events: auto;
}

.annotationLayer .linkAnnotation > a,
.annotationLayer .buttonWidgetAnnotation.pushButton > a {
	position: absolute;
	font-size: 1em;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	pointer-events: auto;
	z-index: 20;
	border-radius: 3px;
	transition: background 0.12s, box-shadow 0.12s;
}

.annotationLayer .linkAnnotation > a:hover,
.annotationLayer .buttonWidgetAnnotation.pushButton > a:hover {
	background: rgba(250, 176, 0, 0.25);
	box-shadow: 0 0 0 2px rgba(250, 176, 0, 0.55);
}

.annotationLayer .textAnnotation img {
	position: absolute;
	cursor: pointer;
	pointer-events: auto;
}

/* ==========================================================================
   Loading state
   ========================================================================== */

#pdf-loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: #e5e7eb;
	pointer-events: none;
}

#pdf-loading p {
	margin: 0;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.7);
}

#pdf-loading.hidden {
	display: none;
}

.pdf-spinner {
	border: 3px solid rgba(255, 255, 255, 0.12);
	border-top: 3px solid var(--color-cta, #FAB000);
	border-radius: 50%;
	width: 44px;
	height: 44px;
	animation: pdf-spin 0.9s linear infinite;
	margin: 0 auto 14px;
}

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

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1199px) {
	#pdf-toggle-spread {
		display: none;
	}
}

@media (max-width: 768px) {
	#pdf-viewer-toolbar {
		padding: 4px 8px;
		flex-wrap: wrap;
		row-gap: 4px;
	}

	.toolbar-left,
	.toolbar-center,
	.toolbar-right {
		gap: 3px;
	}

	/* Hide text labels on the primary toolbar at small widths — icons carry
	   the meaning and the title attributes still describe the action. */
	.pdf-btn__label {
		display: none;
	}

	.pdf-btn {
		padding: 4px 8px;
	}

	.pdf-btn--icon,
	.pdf-zoom-group .pdf-btn {
		width: 28px;
		height: 28px;
	}

	#pdf-catalog-nav {
		padding: 4px 8px;
		flex-wrap: wrap;
		row-gap: 4px;
	}

	.catalog-nav-text {
		display: none;
	}

	.pdf-catalog-info__label {
		display: none;
	}

	#pdf-viewer-canvas-container {
		padding: 10px;
		flex-direction: column;
		gap: 10px;
	}

	.pdf-canvas {
		max-width: none !important;
	}
}

@media (max-width: 480px) {
	#pdf-viewer-toolbar {
		justify-content: center;
	}

	.toolbar-left,
	.toolbar-center,
	.toolbar-right {
		flex: 0 1 auto;
	}
}