/**
 * ITN Flipbook - Frontend Styles
 */

/* ============ Container ============ */
.itn-flipbook-container {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: var(--itn-border-radius, 4px);
border: var(--itn-border-width, 0) solid var(--itn-border-color, transparent);
box-sizing: border-box;
font-family: inherit;
}

.itn-flipbook-shadow {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* ============ Toolbar ============ */
.itn-flipbook-toolbar {
display: flex;
align-items: center;
gap: 6px;
background: var(--itn-toolbar-bg, #1a1a1a);
color: var(--itn-toolbar-color, #fff);
padding: 6px 10px;
flex-wrap: wrap;
}

.itn-fb-btn {
background: var(--itn-btn-bg, rgba(255, 255, 255, 0.15));
border: 1px solid rgba(255, 255, 255, 0.3);
color: var(--itn-btn-color, #fff);
cursor: pointer;
padding: 4px 10px;
border-radius: 3px;
font-size: 14px;
line-height: 1.4;
transition: background 0.2s;
text-decoration: none;
}

.itn-fb-btn:hover {
background: var(--itn-btn-hover-bg, #4a90d9);
color: var(--itn-btn-color, #fff);
}

.itn-fb-btn:disabled {
opacity: 0.35;
cursor: default;
pointer-events: none;
}

.itn-fb-page-info {
color: var(--itn-toolbar-color, #fff);
font-size: 13px;
margin: 0 6px;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 4px;
}

.itn-fb-page-input {
width: 52px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.5);
background: rgba(0, 0, 0, 0.3);
color: var(--itn-toolbar-color, #fff);
border-radius: 3px;
padding: 2px 4px;
font-size: 13px;
}

/* Hide spinner arrows on number input */
.itn-fb-page-input::-webkit-outer-spin-button,
.itn-fb-page-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.itn-fb-page-input[type=number] { -moz-appearance: textfield; }

.itn-fb-zoom-level {
color: var(--itn-toolbar-color, #fff);
font-size: 12px;
min-width: 38px;
text-align: center;
}

/* ============ Canvas wrap ============ */
.itn-flipbook-canvas-wrap {
position: relative;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background: var(--itn-page-bg, inherit);
min-height: 200px;
perspective: 1800px;
transform-style: preserve-3d;
}


.itn-flipbook-canvas {
display: block;
max-width: 100%;
max-height: 100%;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 1;
backface-visibility: hidden;
}

/* ─── Spread view ─── */
.itn-flipbook-container.itn-spread-view .itn-flipbook-canvas-wrap {
display: flex;
flex-direction: row;
gap: 4px;
justify-content: center;
}

.itn-flipbook-canvas-right {
display: block;
max-width: 50%;
max-height: 100%;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
backface-visibility: hidden;
}

.itn-page-turn-layer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 60;
pointer-events: none;
}

.itn-page-turn-book {
position: relative;
width: 100%;
height: 100%;
perspective: 2000px;
transform-style: preserve-3d;
}

.itn-page-turn-base {
position: absolute;
inset: 0;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
filter: brightness(calc(0.88 + var(--itn-turn-progress, 0) * 0.18));
}

.itn-page-turn-sheet {
position: absolute;
inset: 0;
transform-style: preserve-3d;
will-change: transform;
}

.itn-page-turn-sheet.itn-turn-next {
transform-origin: right center;
}

.itn-page-turn-sheet.itn-turn-prev {
transform-origin: left center;
}

.itn-page-turn-face {
position: absolute;
inset: 0;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
backface-visibility: hidden;
}

.itn-page-turn-front {
box-shadow: 0 0 36px rgba(0, 0, 0, 0.24);
}

.itn-page-turn-back {
transform: rotateY(180deg);
filter: brightness(0.76) saturate(0.88);
}

.itn-page-turn-fold-shadow {
position: absolute;
top: 0;
bottom: 0;
width: 24%;
left: 38%;
background: linear-gradient(to right, rgba(0,0,0,0.34), rgba(0,0,0,0.02));
mix-blend-mode: multiply;
pointer-events: none;
}

/* ============ Flip Animations ============ */

/* Book-page turn */
@keyframes itnBookFlipRight {
from { transform: perspective(1000px) rotateY(90deg) scale(0.92); opacity: 0; transform-origin: left center; }
to   { transform: perspective(1000px) rotateY(0deg)  scale(1);    opacity: 1; transform-origin: left center; }
}
@keyframes itnBookFlipLeft {
from { transform: perspective(1000px) rotateY(-90deg) scale(0.92); opacity: 0; transform-origin: right center; }
to   { transform: perspective(1000px) rotateY(0deg)   scale(1);    opacity: 1; transform-origin: right center; }
}

/* Spread (two-page) book: pages unfold from the spine (centre of screen) */
@keyframes itnBookSpreadLeft {
from { transform: perspective(1200px) rotateY(-90deg) scale(0.92); opacity: 0; }
to   { transform: perspective(1200px) rotateY(0deg)   scale(1);    opacity: 1; }
}
@keyframes itnBookSpreadRight {
from { transform: perspective(1200px) rotateY(90deg) scale(0.92); opacity: 0; }
to   { transform: perspective(1200px) rotateY(0deg)  scale(1);    opacity: 1; }
}

/* Slide */
@keyframes itnSlideInRight {
from { transform: translateX(30px); opacity: 0; }
to   { transform: translateX(0);    opacity: 1; }
}
@keyframes itnSlideInLeft {
from { transform: translateX(-30px); opacity: 0; }
to   { transform: translateX(0);     opacity: 1; }
}

/* Flip (3D) */
@keyframes itnFlipIn {
from { transform: perspective(600px) rotateY(-90deg); opacity: 0; }
to   { transform: perspective(600px) rotateY(0deg);   opacity: 1; }
}

/* Fade */
@keyframes itnFadeIn {
from { opacity: 0; }
to   { opacity: 1; }
}

.itn-flipbook-canvas.itn-slide-in-right,
.itn-flipbook-canvas-right.itn-slide-in-right {
animation: itnSlideInRight 0.4s ease forwards;
}
.itn-flipbook-canvas.itn-slide-in-left,
.itn-flipbook-canvas-right.itn-slide-in-left {
animation: itnSlideInLeft 0.4s ease forwards;
}
.itn-flipbook-canvas.itn-flip-in,
.itn-flipbook-canvas-right.itn-flip-in {
animation: itnFlipIn 0.4s ease forwards;
}
.itn-flipbook-canvas.itn-fade-in,
.itn-flipbook-canvas-right.itn-fade-in {
animation: itnFadeIn 0.4s ease forwards;
}

.itn-flipbook-canvas.itn-book-flip-right,
.itn-flipbook-canvas-right.itn-book-flip-right {
animation: itnBookFlipRight 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.itn-flipbook-canvas.itn-book-flip-left,
.itn-flipbook-canvas-right.itn-book-flip-left {
animation: itnBookFlipLeft 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Spread view book animations: left page unfolds from right edge (spine),
   right page unfolds from left edge (spine). */
.itn-flipbook-canvas.itn-book-spread-left {
animation: itnBookSpreadLeft 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
transform-origin: right center;
}
.itn-flipbook-canvas-right.itn-book-spread-right {
animation: itnBookSpreadRight 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
transform-origin: left center;
}

/* Legacy flip classes (kept for compatibility) */
.itn-flipbook-canvas.itn-flip-left {
animation: itnSlideInLeft 0.4s ease forwards;
}
.itn-flipbook-canvas.itn-flip-right {
animation: itnSlideInRight 0.4s ease forwards;
}

/* ============ Side Arrow Buttons ============ */
.itn-fb-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.4);
color: #fff;
border: none;
font-size: 24px;
padding: 12px 16px;
cursor: pointer;
z-index: 10;
border-radius: 3px;
transition: background 0.2s, opacity 0.2s;
opacity: 0.7;
line-height: 1;
}

.itn-fb-arrow:hover {
background: rgba(0, 0, 0, 0.7);
opacity: 1;
}

.itn-fb-arrow-left  { left: 8px; }
.itn-fb-arrow-right { right: 8px; }

.itn-fb-arrow-left.itn-arrow-disabled,
.itn-fb-arrow-right.itn-arrow-disabled {
opacity: 0.2;
pointer-events: none;
}

/* ============ Watermark ============ */
.itn-flipbook-watermark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% + var(--itn-watermark-offset-x, 0%)), calc(-50% + var(--itn-watermark-offset-y, 0%))) rotate(var(--itn-watermark-rotation, -30deg));
font-size: var(--itn-watermark-size, 2em);
color: var(--itn-watermark-color, rgba(150, 150, 150, 0.35));
opacity: var(--itn-watermark-opacity, 0.35);
white-space: nowrap;
pointer-events: none;
user-select: none;
font-weight: bold;
letter-spacing: 0.05em;
z-index: 10;
}

/* Watermark position variants */
.itn-flipbook-watermark.itn-wm-top-left {
top: 10%; left: 10%;
transform: translate(var(--itn-watermark-offset-x, 0%), var(--itn-watermark-offset-y, 0%)) rotate(var(--itn-watermark-rotation, -30deg));
}
.itn-flipbook-watermark.itn-wm-top-center {
top: 10%; left: 50%;
transform: translate(calc(-50% + var(--itn-watermark-offset-x, 0%)), var(--itn-watermark-offset-y, 0%)) rotate(var(--itn-watermark-rotation, -30deg));
}
.itn-flipbook-watermark.itn-wm-top-right {
top: 10%; left: auto; right: 10%;
transform: translate(var(--itn-watermark-offset-x, 0%), var(--itn-watermark-offset-y, 0%)) rotate(var(--itn-watermark-rotation, -30deg));
}
.itn-flipbook-watermark.itn-wm-center-left {
top: 50%; left: 10%;
transform: translate(var(--itn-watermark-offset-x, 0%), calc(-50% + var(--itn-watermark-offset-y, 0%))) rotate(var(--itn-watermark-rotation, -30deg));
}
.itn-flipbook-watermark.itn-wm-center {
top: 50%; left: 50%;
transform: translate(calc(-50% + var(--itn-watermark-offset-x, 0%)), calc(-50% + var(--itn-watermark-offset-y, 0%))) rotate(var(--itn-watermark-rotation, -30deg));
}
.itn-flipbook-watermark.itn-wm-center-right {
top: 50%; left: auto; right: 10%;
transform: translate(var(--itn-watermark-offset-x, 0%), calc(-50% + var(--itn-watermark-offset-y, 0%))) rotate(var(--itn-watermark-rotation, -30deg));
}
.itn-flipbook-watermark.itn-wm-bottom-left {
top: auto; bottom: 10%; left: 10%;
transform: translate(var(--itn-watermark-offset-x, 0%), var(--itn-watermark-offset-y, 0%)) rotate(var(--itn-watermark-rotation, -30deg));
}
.itn-flipbook-watermark.itn-wm-bottom-center {
top: auto; bottom: 10%; left: 50%;
transform: translate(calc(-50% + var(--itn-watermark-offset-x, 0%)), var(--itn-watermark-offset-y, 0%)) rotate(var(--itn-watermark-rotation, -30deg));
}
.itn-flipbook-watermark.itn-wm-bottom-right {
top: auto; bottom: 10%; left: auto; right: 10%;
transform: translate(var(--itn-watermark-offset-x, 0%), var(--itn-watermark-offset-y, 0%)) rotate(var(--itn-watermark-rotation, -30deg));
}

/* Watermark image */
.itn-flipbook-watermark-image {
position: absolute;
pointer-events: none;
user-select: none;
max-width: var(--itn-watermark-image-size, 40%);
max-height: var(--itn-watermark-image-size, 40%);
object-fit: contain;
z-index: 10;
}
.itn-flipbook-watermark-image.itn-wm-top-left    { top: 8%; left: 8%; transform: translate(var(--itn-watermark-offset-x, 0%), var(--itn-watermark-offset-y, 0%)); }
.itn-flipbook-watermark-image.itn-wm-top-center  { top: 8%; left: 50%; transform: translate(calc(-50% + var(--itn-watermark-offset-x, 0%)), var(--itn-watermark-offset-y, 0%)); }
.itn-flipbook-watermark-image.itn-wm-top-right   { top: 8%; right: 8%; transform: translate(var(--itn-watermark-offset-x, 0%), var(--itn-watermark-offset-y, 0%)); }
.itn-flipbook-watermark-image.itn-wm-center-left { top: 50%; left: 8%; transform: translate(var(--itn-watermark-offset-x, 0%), calc(-50% + var(--itn-watermark-offset-y, 0%))); }
.itn-flipbook-watermark-image.itn-wm-center      { top: 50%; left: 50%; transform: translate(calc(-50% + var(--itn-watermark-offset-x, 0%)), calc(-50% + var(--itn-watermark-offset-y, 0%))); }
.itn-flipbook-watermark-image.itn-wm-center-right { top: 50%; right: 8%; transform: translate(var(--itn-watermark-offset-x, 0%), calc(-50% + var(--itn-watermark-offset-y, 0%))); }
.itn-flipbook-watermark-image.itn-wm-bottom-left { bottom: 8%; left: 8%; transform: translate(var(--itn-watermark-offset-x, 0%), var(--itn-watermark-offset-y, 0%)); }
.itn-flipbook-watermark-image.itn-wm-bottom-center{ bottom: 8%; left: 50%; transform: translate(calc(-50% + var(--itn-watermark-offset-x, 0%)), var(--itn-watermark-offset-y, 0%)); }
.itn-flipbook-watermark-image.itn-wm-bottom-right{ bottom: 8%; right: 8%; transform: translate(var(--itn-watermark-offset-x, 0%), var(--itn-watermark-offset-y, 0%)); }

/* ============ Scroll mode ============ */
.itn-flipbook-container.itn-scroll-mode .itn-flipbook-canvas-wrap {
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
align-items: center;
justify-content: flex-start;
scroll-behavior: smooth;
}

.itn-flipbook-scroll-page {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 8px;
position: relative;
}

.itn-flipbook-scroll-page:last-child {
margin-bottom: 0;
}

.itn-flipbook-canvas-scroll {
display: block;
max-width: 100%;
width: 100%;
height: auto;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.25);
}

/* Page separator / number label */
.itn-scroll-page-label {
position: absolute;
bottom: 2px;
right: 6px;
font-size: 11px;
color: rgba(100, 100, 100, 0.6);
pointer-events: none;
user-select: none;
}

/* In scroll mode, hide side arrows (they don't make sense) */
.itn-flipbook-container.itn-scroll-mode .itn-fb-arrow {
display: none !important;
}

/* ============ Thumbnails ============ */
.itn-flipbook-thumbnails {
display: flex;
overflow-x: auto;
background: rgba(0, 0, 0, 0.6);
padding: 6px;
gap: 6px;
min-height: 0;
max-height: 90px;
}

.itn-flipbook-thumbnails:empty {
display: none;
}

.itn-flipbook-thumb {
flex-shrink: 0;
cursor: pointer;
border: 2px solid transparent;
border-radius: 2px;
overflow: hidden;
opacity: 0.7;
transition: opacity 0.2s, border-color 0.2s;
}

.itn-flipbook-thumb:hover,
.itn-flipbook-thumb.active {
border-color: #fff;
opacity: 1;
}

.itn-flipbook-thumb canvas {
display: block;
}

/* ============ Loading spinner ============ */
.itn-flipbook-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #666;
}

.itn-flipbook-spinner {
display: inline-block;
width: 40px;
height: 40px;
border: 4px solid #ddd;
border-top-color: #555;
border-radius: 50%;
animation: itnSpin 0.8s linear infinite;
}

@keyframes itnSpin {
to { transform: rotate(360deg); }
}

/* ============ Error / Denied ============ */
.itn-flipbook-error,
.itn-flipbook-denied {
padding: 16px;
background: #fff3cd;
border: 1px solid #ffc107;
border-radius: 4px;
color: #856404;
text-align: center;
}

.itn-flipbook-denied {
background: #f8d7da;
border-color: #f5c2c7;
color: #842029;
}

/* ============ Fullscreen ============ */
.itn-flipbook-container:-webkit-full-screen {
width: 100vw !important;
height: 100vh !important;
max-width: 100% !important;
}

.itn-flipbook-container:-moz-full-screen {
width: 100vw !important;
height: 100vh !important;
max-width: 100% !important;
}

.itn-flipbook-container:fullscreen {
width: 100vw !important;
height: 100vh !important;
max-width: 100% !important;
}

/* ============ Lightbox ============ */
.itn-fb-lightbox-trigger {
cursor: pointer;
padding: 10px 20px;
background: var(--itn-btn-hover-bg, #4a90d9);
color: #fff;
border: none;
border-radius: 4px;
font-size: 15px;
transition: background 0.2s;
}

.itn-fb-lightbox-trigger:hover {
opacity: 0.85;
}

.itn-fb-lightbox-overlay {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
background: var(--itn-lightbox-bg, rgba(0, 0, 0, 0.85));
}

.itn-fb-lightbox-inner {
position: relative;
max-width: var(--itn-lightbox-max-width, 90vw);
max-height: var(--itn-lightbox-max-height, 90vh);
width: 100%;
overflow: auto;
}

.itn-fb-lightbox-close {
position: absolute;
top: -16px;
right: -16px;
background: #fff;
border: none;
border-radius: 50%;
width: 32px;
height: 32px;
font-size: 18px;
cursor: pointer;
z-index: 100000;
line-height: 32px;
text-align: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* ============ Toast ============ */
.itn-fb-toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 10px 20px;
border-radius: 4px;
font-size: 14px;
z-index: 999999;
animation: itnFadeIn 0.3s ease forwards;
}

/* ============ Edit hint ============ */
.itn-fb-edit-hint a {
color: #555;
text-decoration: none;
opacity: 0.8;
}
.itn-fb-edit-hint a:hover { opacity: 1; text-decoration: underline; }

/* ============ Tablet (768px – 1024px) ============ */
@media screen and (max-width: 1024px) {
.itn-flipbook-thumbnails { max-height: 80px; }
.itn-fb-btn { padding: 4px 8px; font-size: 13px; }
}

/* ============ Mobile (max 768px) ============ */
@media screen and (max-width: 768px) {
.itn-flipbook-container { height: auto !important; min-height: 300px; }
.itn-flipbook-canvas-wrap { min-height: 250px; }
.itn-flipbook-toolbar {
flex-wrap: wrap;
gap: 4px;
padding: 4px 6px;
justify-content: center;
}
.itn-fb-btn { padding: 6px 10px; font-size: 14px; min-width: 36px; }
.itn-fb-page-info { font-size: 12px; }
.itn-flipbook-thumbnails { max-height: 60px; }
/* Disable spread on mobile */
.itn-flipbook-container .itn-flipbook-canvas-right { display: none !important; }
/* Larger side arrows */
.itn-fb-arrow { font-size: 20px; padding: 10px 12px; }
}

/* ============ Very small screens (max 480px) ============ */
@media screen and (max-width: 480px) {
.itn-fb-arrow { display: none; } /* Hide arrows, use swipe only */
.itn-flipbook-toolbar { gap: 2px; }
.itn-fb-btn { padding: 5px 8px; font-size: 13px; }
}

/* ============ Active button state (e.g. magnifier on) ============ */
.itn-fb-btn.itn-btn-active {
background: var(--itn-btn-hover-bg, #4a90d9);
color: #fff;
}

/* ============ Password form ============ */
.itn-fb-password-form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 40px 24px;
background: var(--itn-page-bg, #fff);
border-radius: var(--itn-border-radius, 4px);
text-align: center;
min-height: 200px;
}

.itn-fb-password-form p {
margin: 0;
font-size: 16px;
color: #555;
}

.itn-fb-pw-lock-icon {
font-size: 40px;
line-height: 1;
}

.itn-fb-pw-row {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}

.itn-fb-pw-input {
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 15px;
min-width: 180px;
}

.itn-fb-pw-input:focus {
outline: none;
border-color: #4a90d9;
box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.25);
}

.itn-fb-pw-btn {
padding: 8px 18px;
background: #4a90d9;
color: #fff;
border: none;
border-radius: 4px;
font-size: 15px;
cursor: pointer;
transition: background 0.2s;
}

.itn-fb-pw-btn:hover {
background: #357abd;
}

.itn-fb-pw-btn:disabled {
opacity: 0.5;
cursor: default;
}

.itn-fb-pw-error {
color: #c0392b;
font-size: 13px;
margin: 0;
}