/*
 * PDF Swipe Viewer — viewer.css
 */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.psv-wrapper {
	--psv-accent:        #2563eb;  /* button / highlight colour       — override per-instance or via theme */
	--psv-cta-bg:        #0f172a;  /* CTA page background colour      — override per-instance or via theme */
	--psv-cta-heading:   #f8fafc;  /* CTA heading text colour         — override per-instance or via theme */
	--psv-cta-text:      #cbd5e1;  /* CTA body text colour            — override per-instance or via theme */
	--psv-bg:       #1e1e1e;
	--psv-toolbar:  #111111;
	--psv-radius:   10px;
	--psv-shadow:   0 4px 24px rgba(0,0,0,.25);

	position:        relative;
	display:         flex;
	flex-direction:  column;
	border-radius:   var(--psv-radius);
	overflow:        hidden;
	box-shadow:      var(--psv-shadow);
	background:      var(--psv-bg);
	font-family:     system-ui, -apple-system, sans-serif;
	outline:         none; /* focus ring handled by browser default on tab */
}

/* ── Loading ─────────────────────────────────────────────────────────────── */
.psv-loading {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             12px;
	padding:         60px 20px;
	color:           #aaa;
	font-size:       .9rem;
}

.psv-spinner {
	width:           40px;
	height:          40px;
	border:          3px solid rgba(255,255,255,.1);
	border-top-color:var(--psv-accent);
	border-radius:   50%;
	animation:       psv-spin .8s linear infinite;
}

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

/* ── Canvas area ─────────────────────────────────────────────────────────── */
.psv-canvas-wrap {
	position:       relative;
	display:        flex;
	align-items:    center;
	justify-content:center;
	overflow:       hidden;
	cursor:         grab;
	background:     var(--psv-bg);
	/* height set inline via shortcode attribute */
}

.psv-canvas-wrap:active {
	cursor: grabbing;
}

.psv-canvas {
	display:    block;
	max-width:  100%;
	max-height: 100%;
	width:      100%;
	height:     auto;
	object-fit: contain;
	user-select:none;
	-webkit-user-drag: none;
}

/* ── Hover arrows ────────────────────────────────────────────────────────── */
.psv-arrow {
	position:        absolute;
	top:             50%;
	transform:       translateY(-50%);
	z-index:         10;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           44px;
	height:          44px;
	border:          none;
	border-radius:   50%;
	background:      rgba(0,0,0,.5);
	color:           #fff;
	cursor:          pointer;
	opacity:         0;
	transition:      opacity .2s, background .2s;
	padding:         0;
}

.psv-arrow svg {
	width:  22px;
	height: 22px;
}

.psv-canvas-wrap:hover .psv-arrow:not([hidden]) {
	opacity: 1;
}

.psv-arrow:hover {
	background: var(--psv-accent) !important;
}

.psv-arrow--prev { left:  12px; }
.psv-arrow--next { right: 12px; }

/* ── Fullscreen expand / close buttons ───────────────────────────────────── */
.psv-expand,
.psv-close {
	position:        absolute;
	top:             10px;
	right:           10px;
	z-index:         20;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           44px;
	height:          44px;
	border:          none;
	border-radius:   50%;
	background:      rgba(0,0,0,.55);
	color:           #fff;
	cursor:          pointer;
	padding:         0;
	transition:      background .2s;
}

.psv-expand svg,
.psv-close svg {
	width:  20px;
	height: 20px;
}

.psv-expand:hover,
.psv-close:hover {
	background: var(--psv-accent);
}

/* Expand only shown on touch/mobile devices */
.psv-expand {
	display: none;
}

@media ( hover: none ), ( pointer: coarse ) {
	.psv-expand {
		display: flex;
	}
}

/* Close button hidden until fullscreen; placed top-right of fullscreen overlay */
.psv-close[hidden] { display: none; }

/* ── Fullscreen state ────────────────────────────────────────────────────── */
.psv-wrapper.psv-is-fullscreen {
	position:      fixed;
	inset:         0;
	z-index:       99999;
	width:         100% !important;
	border-radius: 0;
	display:       flex;
	flex-direction:column;
}

.psv-wrapper.psv-is-fullscreen .psv-canvas-wrap {
	flex:   1 1 auto;
	height: auto !important;
}

.psv-wrapper.psv-is-fullscreen .psv-expand {
	display: none;
}

.psv-wrapper.psv-is-fullscreen .psv-close {
	display: flex;
}

/* Prevent body scroll while fullscreen viewer is open */
.psv-body-fullscreen {
	overflow: hidden;
}

/* ── CTA fake page (inside canvas-wrap, absolutely positioned) ───────────── */
.psv-cta[hidden] { display: none; }

.psv-cta {
	position:        absolute;
	inset:           0;
	z-index:         5;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         40px 24px;
	background:      var(--psv-cta-bg);
	animation:       psv-fadein .4s ease;
}

@keyframes psv-fadein {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.psv-cta__inner {
	max-width:  520px;
	text-align: center;
}

.psv-cta__heading {
	margin:      0 0 12px;
	font-size:   clamp(1.4rem, 4vw, 2rem);
	font-weight: 700;
	color:       var(--psv-cta-heading);
	line-height: 1.2;
}

.psv-cta__text {
	margin:      0 0 28px;
	font-size:   1rem;
	line-height: 1.6;
	color:       var(--psv-cta-text);
}

.psv-cta__btn {
	display:         inline-block;
	padding:         14px 36px;
	border-radius:   999px;
	background:      var(--psv-accent);
	color:           #fff !important;
	font-size:       1rem;
	font-weight:     600;
	text-decoration: none;
	letter-spacing:  .02em;
	transition:      transform .15s, box-shadow .15s, filter .15s;
	box-shadow:      0 4px 14px rgba(0,0,0,.3);
}

.psv-cta__btn:hover {
	filter:     brightness(1.12);
	transform:  translateY(-2px);
	box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

.psv-cta__btn:active {
	transform: translateY(0);
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.psv-toolbar {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             6px;
	padding:         8px 12px;
	background:      var(--psv-toolbar);
	border-top:      1px solid rgba(255,255,255,.07);
}

.psv-toolbar[hidden] {
	display: none;
}

/* Toolbar buttons */
.psv-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           36px;
	height:          36px;
	border:          1px solid rgba(255,255,255,.12);
	border-radius:   6px;
	background:      rgba(255,255,255,.05);
	color:           #d1d5db;
	cursor:          pointer;
	transition:      background .15s, color .15s, border-color .15s;
	padding:         0;
	flex-shrink:     0;
}

.psv-btn svg {
	width:  16px;
	height: 16px;
}

.psv-btn:hover:not(:disabled) {
	background:   var(--psv-accent);
	border-color: var(--psv-accent);
	color:        #fff;
}

.psv-btn:disabled {
	opacity: .3;
	cursor:  not-allowed;
}

/* Page counter */
.psv-counter {
	display:     flex;
	align-items: center;
	gap:         6px;
	color:       #9ca3af;
	font-size:   .88rem;
	padding:     0 6px;
}

.psv-page-input {
	width:          46px;
	padding:        4px 6px;
	border:         1px solid rgba(255,255,255,.15);
	border-radius:  5px;
	background:     rgba(255,255,255,.08);
	color:          #f1f5f9;
	font-size:      .88rem;
	text-align:     center;
	-moz-appearance:textfield;
}

.psv-page-input::-webkit-outer-spin-button,
.psv-page-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

.psv-page-input:focus {
	outline:      2px solid var(--psv-accent);
	outline-offset:1px;
}

.psv-sep,
.psv-total {
	color: #6b7280;
}

/* ── Error state ─────────────────────────────────────────────────────────── */
.psv-error {
	color:      #f87171;
	padding:    20px;
	text-align: center;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media ( max-width: 480px ) {
	.psv-btn--first,
	.psv-btn--last {
		display: none;
	}
	.psv-cta {
		padding: 32px 16px;
	}
}