/* ==========================================================================
   Climatecera Catalogues — flipbook viewer (single catalogue page).
   ========================================================================== */

.ccpc-viewer {
	--fb-bar: #14161a;
	--fb-bar-ink: #f4f2ee;
	--fb-bar-muted: #9aa0a8;
	--fb-stage: #24272c;
	--fb-panel: #1b1e22;
	--fb-accent: #b09262;
	--fb-bar-h: 60px;
	position: relative; display: flex; flex-direction: column; min-height: calc(100vh - 80px); background: var(--fb-stage); color: var(--fb-bar-ink);
}
.ccpc-viewer *, .ccpc-viewer *::before, .ccpc-viewer *::after { box-sizing: border-box; }
.ccpc-viewer [hidden] { display: none !important; }
.ccpc-viewer:fullscreen { min-height: 100vh; }

/* Toolbar */
.ccpc-viewer__bar {
	position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
	min-height: var(--fb-bar-h); padding: 8px 14px; background: var(--fb-bar); color: var(--fb-bar-ink); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
.ccpc-viewer__group { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ccpc-viewer__group--center { justify-content: center; }
.ccpc-viewer__group--end { justify-content: flex-end; }
.ccpc-viewer__heading { min-width: 0; margin-left: 6px; }
.ccpc-viewer__title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--fb-bar-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccpc-viewer__category { display: block; color: var(--fb-accent); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccpc-viewer__category:hover { color: #fff; }

.ccpc-viewer .ccpc-viewer__btn.ccpc-viewer__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 10px;
	border: 0; border-radius: 8px; background: transparent; color: var(--fb-bar-ink); font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
	cursor: pointer; transition: background-color 0.2s, color 0.2s, opacity 0.2s; box-shadow: none;
}
.ccpc-viewer .ccpc-viewer__btn.ccpc-viewer__btn:hover, .ccpc-viewer .ccpc-viewer__btn.ccpc-viewer__btn:focus-visible { background: rgba(255, 255, 255, 0.1); color: #fff; outline: none; }
.ccpc-viewer .ccpc-viewer__btn.ccpc-viewer__btn[aria-pressed="true"] { background: var(--fb-accent); color: #14161a; }
.ccpc-viewer .ccpc-viewer__btn.ccpc-viewer__btn:disabled { opacity: 0.35; cursor: default; background: transparent; }
.ccpc-viewer__label { display: none; }
@media (min-width: 900px) { .ccpc-viewer__label { display: inline; } }

.ccpc-viewer__pager { display: flex; align-items: center; gap: 8px; margin: 0 6px; font-size: 13px; color: var(--fb-bar-muted); white-space: nowrap; }
.ccpc-viewer .ccpc-viewer__page-input {
	width: 56px; height: 36px; padding: 0 8px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; background: rgba(255, 255, 255, 0.06);
	color: #fff; font: inherit; font-size: 14px; font-weight: 600; text-align: center; -moz-appearance: textfield;
}
.ccpc-viewer .ccpc-viewer__page-input::-webkit-outer-spin-button, .ccpc-viewer .ccpc-viewer__page-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ccpc-viewer .ccpc-viewer__page-input:focus { outline: none; border-color: var(--fb-accent); }
.ccpc-viewer__zoom { min-width: 44px; font-size: 12px; font-weight: 600; text-align: center; color: var(--fb-bar-muted); font-variant-numeric: tabular-nums; }

/* Body: thumbs | stage | search */
.ccpc-viewer__body { position: relative; display: flex; flex: 1 1 auto; min-height: 0; }
.ccpc-viewer__stage {
	position: relative; flex: 1 1 auto; min-width: 0; min-height: calc(100vh - var(--fb-bar-h) - 80px); overflow: auto; overscroll-behavior: contain;
	background: radial-gradient(ellipse at center, #2c3036 0%, var(--fb-stage) 70%); outline: none; touch-action: pan-x pan-y;
}
.ccpc-viewer:fullscreen .ccpc-viewer__stage { min-height: calc(100vh - var(--fb-bar-h)); }
.ccpc-viewer__stage:focus-visible { box-shadow: inset 0 0 0 2px var(--fb-accent); }
.ccpc-viewer__book-wrap { display: flex; align-items: center; justify-content: center; min-width: 100%; min-height: 100%; padding: 28px 56px; transform-origin: top left; }
.ccpc-viewer__book { position: relative; margin: 0 auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45)); opacity: 0; transition: opacity 0.4s ease; }
.ccpc-viewer.is-ready .ccpc-viewer__book { opacity: 1; }
.ccpc-viewer.is-zoomed .ccpc-viewer__book-wrap { align-items: flex-start; justify-content: flex-start; }
.ccpc-viewer.is-zoomed .ccpc-viewer__stage { cursor: grab; }
.ccpc-viewer.is-zoomed.is-panning .ccpc-viewer__stage { cursor: grabbing; user-select: none; }

/* page-flip pages */
.ccpc-viewer .fb-page { background: #fff; overflow: hidden; }
.ccpc-viewer .fb-page canvas { display: block; width: 100%; height: 100%; }
.ccpc-viewer .fb-page.is-blank { background: #f2f0eb; }
.ccpc-viewer .fb-page .fb-page__num { position: absolute; right: 10px; bottom: 8px; font-size: 10px; color: rgba(0, 0, 0, 0.35); pointer-events: none; }
.ccpc-viewer .fb-page.--left .fb-page__num { right: auto; left: 10px; }
.ccpc-viewer .fb-page.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 2px solid rgba(0, 0, 0, 0.12); border-top-color: rgba(0, 0, 0, 0.45); border-radius: 50%; animation: fb-spin 0.8s linear infinite; }

/* Edge click zones (desktop) */
.ccpc-viewer .ccpc-viewer__edge {
	position: absolute; top: 0; bottom: 0; width: 56px; border: 0; background: transparent; cursor: pointer; opacity: 0; transition: opacity 0.2s; z-index: 2;
}
.ccpc-viewer .ccpc-viewer__edge--prev { left: 0; }
.ccpc-viewer .ccpc-viewer__edge--next { right: 0; }
.ccpc-viewer .ccpc-viewer__edge::before { content: ""; position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: rgba(255, 255, 255, 0.12) center / 18px no-repeat; }
.ccpc-viewer .ccpc-viewer__edge--prev::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); }
.ccpc-viewer .ccpc-viewer__edge--next::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); }
.ccpc-viewer__stage:hover .ccpc-viewer__edge:not(:disabled) { opacity: 1; }
.ccpc-viewer .ccpc-viewer__edge:disabled { display: none; }
.ccpc-viewer.is-zoomed .ccpc-viewer__edge { display: none; }

/* Loading */
.ccpc-viewer__loading { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--fb-stage); color: var(--fb-bar-muted); font-size: 14px; transition: opacity 0.4s ease, visibility 0.4s; }
.ccpc-viewer.is-ready .ccpc-viewer__loading, .ccpc-viewer.has-error .ccpc-viewer__loading { opacity: 0; visibility: hidden; }
.ccpc-viewer.has-error .ccpc-viewer__loading { opacity: 1; visibility: visible; }
.ccpc-viewer__loading-cover { width: 160px; max-height: 220px; object-fit: cover; border-radius: 4px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); opacity: 0.9; }
.ccpc-viewer__spinner { width: 34px; height: 34px; border: 3px solid rgba(255, 255, 255, 0.12); border-top-color: var(--fb-accent); border-radius: 50%; animation: fb-spin 0.9s linear infinite; }
.ccpc-viewer.has-error .ccpc-viewer__spinner { display: none; }
.ccpc-viewer__progress { width: 220px; height: 4px; appearance: none; border: 0; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.ccpc-viewer__progress::-webkit-progress-bar { background: rgba(255, 255, 255, 0.1); }
.ccpc-viewer__progress::-webkit-progress-value { background: var(--fb-accent); transition: width 0.2s; }
.ccpc-viewer__progress::-moz-progress-bar { background: var(--fb-accent); }
.ccpc-viewer__loading .ccpc-btn { margin-top: 6px; }
@keyframes fb-spin { to { transform: rotate(360deg); } }

/* Thumbnails panel */
.ccpc-viewer__thumbs { flex: 0 0 200px; overflow: auto; background: var(--fb-panel); border-right: 1px solid rgba(255, 255, 255, 0.06); }
.ccpc-viewer__thumb-list { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 16px; list-style: none; counter-reset: fb-thumb; }
.ccpc-viewer__thumb { margin: 0; }
.ccpc-viewer .ccpc-viewer__thumb-btn {
	display: block; width: 100%; padding: 0; border: 2px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; text-align: center; color: var(--fb-bar-muted); font: inherit; font-size: 11px;
}
.ccpc-viewer .ccpc-viewer__thumb-btn:hover, .ccpc-viewer .ccpc-viewer__thumb-btn:focus-visible { color: #fff; outline: none; }
.ccpc-viewer .ccpc-viewer__thumb-btn.is-active { border-color: var(--fb-accent); color: #fff; }
.ccpc-viewer__thumb-canvas { display: block; width: 100%; aspect-ratio: var(--fb-page-ratio, 0.7); background: #e9e6e0; border-radius: 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); }
.ccpc-viewer__thumb-num { display: block; padding: 6px 0 2px; }

/* Search panel */
.ccpc-viewer__search { flex: 0 0 300px; display: flex; flex-direction: column; overflow: hidden; background: var(--fb-panel); border-left: 1px solid rgba(255, 255, 255, 0.06); }
.ccpc-viewer__search-form { display: flex; gap: 8px; padding: 14px; }
.ccpc-viewer .ccpc-viewer__search-input { flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; background: rgba(255, 255, 255, 0.06); color: #fff; font: inherit; font-size: 14px; }
.ccpc-viewer .ccpc-viewer__search-input:focus { outline: none; border-color: var(--fb-accent); }
.ccpc-viewer__search-form .ccpc-btn.ccpc-btn { min-height: 42px; padding: 0 14px; font-size: 11px; background: var(--fb-accent); color: #14161a; }
.ccpc-viewer__search-status { margin: 0; padding: 0 14px 10px; color: var(--fb-bar-muted); font-size: 12.5px; }
.ccpc-viewer__search-results { flex: 1 1 auto; margin: 0; padding: 0 8px 14px; list-style: none; overflow: auto; }
.ccpc-viewer .ccpc-viewer__result { display: block; width: 100%; padding: 10px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--fb-bar-ink); font: inherit; font-size: 13px; line-height: 1.45; text-align: left; cursor: pointer; }
.ccpc-viewer .ccpc-viewer__result:hover, .ccpc-viewer .ccpc-viewer__result:focus-visible { background: rgba(255, 255, 255, 0.08); outline: none; }
.ccpc-viewer__result-page { display: block; color: var(--fb-accent); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.ccpc-viewer__result mark { background: rgba(176, 146, 98, 0.35); color: #fff; padding: 0 2px; border-radius: 2px; }

/* Meta / noscript */
.ccpc-viewer__meta { padding: 18px var(--ccpc-gutter, 24px); background: var(--fb-bar); color: var(--fb-bar-muted); font-size: 14px; }
.ccpc-viewer__desc { max-width: 900px; margin: 0 auto; }
.ccpc-viewer__noscript { padding: 40px; text-align: center; }

/* Responsive */
@media (max-width: 899px) {
	.ccpc-viewer { --fb-bar-h: auto; }
	.ccpc-viewer__bar { grid-template-columns: 1fr 1fr; gap: 6px 8px; padding: 8px 10px; }
	.ccpc-viewer__group--start { grid-column: 1; }
	.ccpc-viewer__group--end { grid-column: 2; }
	.ccpc-viewer__group--center { grid-column: 1 / -1; justify-content: center; }
	.ccpc-viewer__heading { display: none; }
	.ccpc-viewer__zoom { display: none; }
	.ccpc-viewer__stage { min-height: 70vh; }
	.ccpc-viewer__book-wrap { padding: 16px 12px; }
	.ccpc-viewer .ccpc-viewer__edge { display: none; }
	.ccpc-viewer__body { flex-direction: column; }
	.ccpc-viewer__thumbs { flex: 0 0 auto; order: 3; max-height: 160px; border-right: 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
	.ccpc-viewer__thumb-list { flex-direction: row; padding: 12px; }
	.ccpc-viewer__thumb { flex: 0 0 84px; }
	.ccpc-viewer__search { flex: 0 0 auto; order: 2; max-height: 45vh; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
}
@media (prefers-reduced-motion: reduce) {
	.ccpc-viewer__book, .ccpc-viewer__loading { transition: none !important; }
}