/**
 * IWT Flip Book – Public Stylesheet
 *
 * Design tokens use CSS custom properties so dark-mode and custom CSS
 * overrides require minimal specificity.
 *
 * @package IWT_Flip_Book
 * @version 1.0.0
 */

/* ── Design tokens ─────────────────────────────────────────────────────────── */
.iwt-fb-wrapper {
	--fb-bg:           #f0ede8;
	--fb-page-bg:      #fff;
	--fb-toolbar-bg:   #2c2c2c;
	--fb-toolbar-text: #f0f0f0;
	--fb-btn-bg:       #444;
	--fb-btn-hover:    #666;
	--fb-btn-text:     #fff;
	--fb-shadow:       rgba(0, 0, 0, 0.35);
	--fb-thumb-border: #ccc;
	--fb-thumb-active: #0073aa;
	--fb-text:         #1a1a1a;
	--fb-radius:       6px;
	--fb-transition:   0.2s ease;
	--fb-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Dark mode overrides ────────────────────────────────────────────────────── */
.iwt-fb-wrapper.dark {
	--fb-bg:           #1a1a2e;
	--fb-page-bg:      #16213e;
	--fb-toolbar-bg:   #0f0f1a;
	--fb-toolbar-text: #e0e0e0;
	--fb-btn-bg:       #2a2a4a;
	--fb-btn-hover:    #3a3a6a;
	--fb-shadow:       rgba(0, 0, 0, 0.6);
	--fb-thumb-border: #333;
	--fb-text:         #e0e0e0;
}

/* ── Wrapper ────────────────────────────────────────────────────────────────── */
.iwt-fb-wrapper {
	display:        flex;
	flex-direction: column;
	background:     var(--fb-bg);
	border-radius:  var(--fb-radius);
	overflow:       hidden;
	box-shadow:     0 4px 24px var(--fb-shadow);
	font-family:    var(--fb-font);
	box-sizing:     border-box;
	position:       relative;
}

*, *::before, *::after {
	box-sizing: inherit;
}

/* ── Toolbar ────────────────────────────────────────────────────────────────── */
.iwt-fb-toolbar {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	background:      var(--fb-toolbar-bg);
	color:           var(--fb-toolbar-text);
	padding:         6px 10px;
	flex-shrink:     0;
	gap:             6px;
}

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

.iwt-fb-toolbar-center {
	flex: 1;
	text-align: center;
	font-size:  0.85rem;
	color:      var(--fb-toolbar-text);
	white-space: nowrap;
}

/* ── Toolbar buttons ────────────────────────────────────────────────────────── */
.iwt-fb-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	background:      var(--fb-btn-bg);
	color:           var(--fb-btn-text);
	border:          none;
	border-radius:   4px;
	padding:         4px 8px;
	cursor:          pointer;
	font-size:       0.9rem;
	min-width:       30px;
	min-height:      28px;
	transition:      background var(--fb-transition), transform var(--fb-transition);
	line-height:     1;
}

.iwt-fb-btn:hover,
.iwt-fb-btn:focus-visible {
	background: var(--fb-btn-hover);
	outline:    2px solid var(--fb-thumb-active);
	outline-offset: 2px;
}

.iwt-fb-btn:active {
	transform: scale(0.93);
}

/* ── Stage (book display area) ──────────────────────────────────────────────── */
.iwt-fb-stage {
	flex:           1;
	position:       relative;
	display:        flex;
	align-items:    center;
	justify-content: center;
	overflow:       hidden;
	background:     var(--fb-bg);
	outline:        none;
	cursor:         default;
}

/* ── Book (page container) ──────────────────────────────────────────────────── */
.iwt-fb-book {
	display:         flex;
	align-items:     stretch;
	justify-content: center;
	height:          100%;
	width:           100%;
	max-width:       100%;
	perspective:     1200px;
}

/* ── Individual page ────────────────────────────────────────────────────────── */
.iwt-fb-page {
	flex:             1 1 0;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	background:       var(--fb-page-bg);
	box-shadow:       2px 0 12px var(--fb-shadow);
	overflow:         hidden;
	transform-style:  preserve-3d;
	will-change:      transform, opacity;
	max-width:        50%;
}

.iwt-fb-page--left  { border-right: 1px solid rgba(0,0,0,0.06); }
.iwt-fb-page--right { border-left:  1px solid rgba(0,0,0,0.06); }
.iwt-fb-page--single { max-width: 100%; box-shadow: 0 4px 20px var(--fb-shadow); }

/* ── Page canvas ────────────────────────────────────────────────────────────── */
.iwt-fb-page-canvas {
	display:   block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* ── Loading spinner ────────────────────────────────────────────────────────── */
.iwt-fb-loading {
	position:   absolute;
	inset:      0;
	display:    flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--fb-bg);
	z-index:    10;
	color:      var(--fb-text);
	gap:        12px;
}

.iwt-fb-loading[hidden] { display: none; }

.iwt-fb-spinner {
	width:  44px;
	height: 44px;
	border: 4px solid rgba(0,0,0,0.1);
	border-top-color: var(--fb-thumb-active);
	border-radius: 50%;
	animation: iwt-fb-spin 0.8s linear infinite;
}

.dark .iwt-fb-spinner {
	border-color: rgba(255,255,255,0.1);
	border-top-color: #4a9eff;
}

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

/* ── Error state ────────────────────────────────────────────────────────────── */
.iwt-fb-error-state {
	position:   absolute;
	inset:      0;
	display:    flex;
	align-items: center;
	justify-content: center;
	color:      #c00;
	text-align: center;
	padding:    20px;
	font-size:  0.95rem;
}

.iwt-fb-error-state[hidden] { display: none; }

/* ── Thumbnails strip ───────────────────────────────────────────────────────── */
.iwt-fb-thumbnails {
	display:    flex;
	align-items: center;
	overflow-x: auto;
	gap:        6px;
	padding:    8px 10px;
	background: var(--fb-toolbar-bg);
	scrollbar-width: thin;
	scrollbar-color: #555 transparent;
	flex-shrink: 0;
}

.iwt-fb-thumbnails[hidden] { display: none; }

.iwt-fb-thumb {
	flex-shrink: 0;
	cursor:      pointer;
	border:      2px solid var(--fb-thumb-border);
	border-radius: 3px;
	overflow:    hidden;
	transition:  border-color var(--fb-transition), transform var(--fb-transition);
}

.iwt-fb-thumb:hover,
.iwt-fb-thumb:focus-visible {
	border-color: var(--fb-thumb-active);
	transform:    scale(1.05);
	outline:      none;
}

.iwt-fb-thumb.active {
	border-color: var(--fb-thumb-active);
	box-shadow:   0 0 0 2px var(--fb-thumb-active);
}

.iwt-fb-thumb canvas {
	display: block;
}

/* ── Footer (download link) ─────────────────────────────────────────────────── */
.iwt-fb-footer {
	text-align:  center;
	padding:     6px;
	background:  var(--fb-toolbar-bg);
	flex-shrink: 0;
}

.iwt-fb-download {
	color:           var(--fb-toolbar-text);
	font-size:       0.8rem;
	text-decoration: none;
	opacity:         0.7;
	transition:      opacity var(--fb-transition);
}

.iwt-fb-download:hover {
	opacity: 1;
	text-decoration: underline;
}

/* ── SEO hidden content ─────────────────────────────────────────────────────── */
.iwt-fb-seo-content {
	position:   absolute;
	width:      1px;
	height:     1px;
	padding:    0;
	margin:     -1px;
	overflow:   hidden;
	clip:       rect(0, 0, 0, 0);
	white-space: nowrap;
	border:     0;
}

/* ── Fullscreen ─────────────────────────────────────────────────────────────── */
.iwt-fb-wrapper:fullscreen,
.iwt-fb-wrapper:-webkit-full-screen,
.iwt-fb-wrapper:-moz-full-screen {
	width:  100vw !important;
	height: 100vh !important;
	border-radius: 0;
}

.iwt-fb-wrapper:fullscreen .iwt-fb-stage,
.iwt-fb-wrapper:-webkit-full-screen .iwt-fb-stage,
.iwt-fb-wrapper:-moz-full-screen .iwt-fb-stage {
	height: calc(100vh - 96px) !important;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.iwt-fb-btn {
		padding:  3px 6px;
		font-size: 0.8rem;
		min-width: 26px;
		min-height: 24px;
	}

	.iwt-fb-toolbar-center {
		font-size: 0.75rem;
	}

	.iwt-fb-page {
		max-width: 100%;
		box-shadow: 0 2px 10px var(--fb-shadow);
	}
}

/* ── Reduced motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.iwt-fb-btn,
	.iwt-fb-thumb {
		transition: none;
	}
}