/* FlipBook Specific Styles */

/* Turn.js Flipbook Enhancements */
.flipbook {
    margin: 0 auto;
    position: relative;
    transform-origin: center center;
    transition: transform 0.3s ease;
}

.flipbook .turn-page {
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    position: relative;
}

.flipbook .turn-page canvas {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* Page shadows for 3D effect */
.flipbook .turn-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.1) 0%,
        rgba(0,0,0,0.05) 10%,
        transparent 20%,
        transparent 80%,
        rgba(0,0,0,0.05) 90%,
        rgba(0,0,0,0.1) 100%
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.flipbook .turn-page:hover::before {
    opacity: 1;
}

/* Page turning animations */
.flipbook .turn-page.turning {
    z-index: 10;
}

.flipbook .turn-page.turning::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.8) 0%,
        rgba(255,255,255,0.4) 50%,
        rgba(0,0,0,0.1) 100%
    );
    pointer-events: none;
    animation: pageFlip 0.6s ease-in-out;
}

@keyframes pageFlip {
    0% {
        opacity: 0;
        transform: rotateY(-90deg);
    }
    50% {
        opacity: 1;
        transform: rotateY(-45deg);
    }
    100% {
        opacity: 0;
        transform: rotateY(0deg);
    }
}

/* Page corners for turning indication */
.flipbook .turn-page .corner {
    position: absolute;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.1) 50%);
    cursor: pointer;
    transition: all 0.3s ease;
}

.flipbook .turn-page .corner.top-right {
    top: 0;
    right: 0;
    border-bottom-left-radius: 30px;
}

.flipbook .turn-page .corner.bottom-right {
    bottom: 0;
    right: 0;
    border-top-left-radius: 30px;
}

.flipbook .turn-page .corner.bottom-left {
    bottom: 0;
    left: 0;
    border-top-right-radius: 30px;
}

.flipbook .turn-page .corner:hover {
    background: linear-gradient(135deg, transparent 50%, rgba(102, 126, 234, 0.3) 50%);
    transform: scale(1.2);
}

/* Responsive flipbook sizing */
@media (max-width: 1200px) {
    .flipbook {
        width: 700px !important;
        height: 525px !important;
    }
}

@media (max-width: 768px) {
    .flipbook {
        width: 600px !important;
        height: 450px !important;
    }
}

@media (max-width: 640px) {
    .flipbook {
        width: 90vw !important;
        height: calc(90vw * 0.75) !important;
        max-width: 500px !important;
        max-height: 375px !important;
    }
}

/* Loading states */
.flipbook.loading {
    opacity: 0.5;
    pointer-events: none;
}

.flipbook.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid rgba(102, 126, 234, 0.3);
    border-top: 3px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1000;
}

/* Page transition effects */
.flipbook .turn-page {
    transition: all 0.3s ease;
}

.flipbook .turn-page.page-turning {
    transform: perspective(1000px) rotateY(-15deg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Zoom effects */
.flipbook-container.zoomed {
    overflow: auto;
    cursor: grab;
}

.flipbook-container.zoomed:active {
    cursor: grabbing;
}

/* Fullscreen mode adjustments */
.reader-view:fullscreen .flipbook {
    width: 80vw !important;
    height: 80vh !important;
    max-width: none !important;
    max-height: none !important;
}

.reader-view:fullscreen .flipbook-container {
    padding: 10vh 10vw;
}

/* Page quality enhancements */
.flipbook .turn-page canvas {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

/* Interactive elements */
.flipbook .turn-page:hover {
    cursor: pointer;
}

.flipbook .turn-page.even:hover {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M16 2l-10 10h6v12h8v-12h6z" fill="%23667eea"/></svg>') 16 16, auto;
}

.flipbook .turn-page.odd:hover {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M16 30l10-10h-6v-12h-8v12h-6z" fill="%23667eea"/></svg>') 16 16, auto;
}

/* Page numbers overlay */
.flipbook .page-number {
    position: absolute;
    bottom: 10px;
    font-size: 12px;
    color: #666;
    background: rgba(255,255,255,0.8);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: Arial, sans-serif;
}

.flipbook .page-number.left {
    left: 10px;
}

.flipbook .page-number.right {
    right: 10px;
}

/* Accessibility improvements */
.flipbook .turn-page:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .flipbook {
        width: 100% !important;
        height: auto !important;
        box-shadow: none !important;
    }
    
    .flipbook .turn-page {
        position: static !important;
        display: block !important;
        page-break-after: always;
        box-shadow: none !important;
        border: none !important;
    }
    
    .flipbook .turn-page canvas {
        width: 100% !important;
        height: auto !important;
    }
}