/* ==========================================================================
   Khichuri Modern E-Book Reader Modal (PDF.js Powered) v2.3
   Responsive, Fast, & Mobile Friendly
   With Screen-Fit (Zero Scroll) & Continuous Scroll Modes
   ========================================================================== */

body.book-preview-modal-open {
    overflow: hidden !important;
}

/* Modal Overlay */
.book-preview-modal {
    position: fixed !important;
    z-index: 999999 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(15, 23, 42, 0.94) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.book-preview-modal.show {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Modal Content Card */
.book-preview-modal-content {
    background-color: #181824 !important;
    width: 100% !important;
    max-width: 1100px !important;
    height: 100% !important;
    max-height: 94vh !important;
    border-radius: 18px !important;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Reader Top Header Bar */
.reader-header-bar {
    background: #12121a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 12px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-shrink: 0 !important;
    z-index: 20 !important;
    box-sizing: border-box !important;
}

.reader-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    flex: 1 !important;
}

.reader-mode-badge {
    background: rgba(124, 58, 237, 0.25) !important;
    border: 1px solid rgba(124, 58, 237, 0.45) !important;
    color: #c4b5fd !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
}

.reader-book-title {
    color: #f8fafc !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-family: 'Hind Siliguri', sans-serif !important;
}

/* Navigation Controls (Center) */
.reader-nav-controls {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.reader-page-indicator {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #94a3b8 !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    padding: 4px 12px !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.reader-page-indicator input {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    width: 34px !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    font-family: inherit !important;
}

.reader-page-indicator input:focus {
    border-bottom: 1px solid #7c3aed !important;
}

/* View Mode Toggle: [পৃষ্ঠা | স্ক্রোল] */
.reader-viewmode-toggle {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 9999px !important;
    padding: 2px !important;
    gap: 2px !important;
}

.reader-mode-btn {
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    font-family: inherit !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.reader-mode-btn.active {
    background: #7c3aed !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4) !important;
}

.reader-mode-btn:hover:not(.active) {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Reader Standard Buttons */
.reader-ctrl-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #e2e8f0 !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
}

.reader-ctrl-btn:hover:not(:disabled) {
    background: rgba(124, 58, 237, 0.35) !important;
    border-color: #7c3aed !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

.reader-ctrl-btn:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}

.reader-fit-btn {
    width: auto !important;
    padding: 0 12px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
}

.reader-close-btn {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
}

.reader-close-btn:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}

/* Right Controls */
.reader-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.reader-zoom-group {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* Reader Viewport Area */
.book-preview-modal-body {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    background: #0b0b12 !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 20px 16px !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
}

/* Single Page Mode Wrapper */
.reader-single-page-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
}

.reader-canvas-wrapper {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    z-index: 2 !important;
}

#reader-canvas {
    display: block !important;
    background: #ffffff !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.65), 0 2px 10px rgba(0, 0, 0, 0.4) !important;
    border-radius: 6px !important;
    transition: transform 0.15s ease !important;
}

/* Bottom Navigation Action Bar (Right below the page) */
.reader-page-bottom-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    margin-top: 18px !important;
    margin-bottom: 24px !important;
    padding: 10px 18px !important;
    background: rgba(24, 24, 36, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 9999px !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45) !important;
    z-index: 10 !important;
}

.reader-bottom-nav-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #e2e8f0 !important;
    font-family: inherit !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.reader-bottom-nav-btn:hover:not(:disabled) {
    background: rgba(124, 58, 237, 0.35) !important;
    border-color: #7c3aed !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

.reader-bottom-nav-btn.primary {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    border-color: #7c3aed !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4) !important;
}

.reader-bottom-nav-btn.primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.6) !important;
    transform: translateY(-2px) !important;
}

.reader-bottom-nav-btn:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.reader-bottom-page-status {
    color: #94a3b8 !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
}

/* Floating Side Chevron Navigation (Always visible in viewport on Left & Right) */
.reader-floating-side-btn {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 100 !important;
    background: rgba(18, 18, 26, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #e2e8f0 !important;
    width: 44px !important;
    height: 56px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
    padding: 0 !important;
}

.reader-side-prev {
    left: 28px !important;
}

.reader-side-next {
    right: 28px !important;
}

.reader-floating-side-btn:hover:not(:disabled) {
    background: #7c3aed !important;
    border-color: #a78bfa !important;
    color: #ffffff !important;
    transform: translateY(-50%) scale(1.08) !important;
    box-shadow: 0 12px 35px rgba(124, 58, 237, 0.5) !important;
}

.reader-floating-side-btn:disabled {
    opacity: 0.2 !important;
    cursor: not-allowed !important;
    transform: translateY(-50%) !important;
}

/* Continuous Scroll Mode Wrapper */
.reader-continuous-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 32px !important;
    width: 100% !important;
    padding: 10px 0 50px !important;
}

.reader-scroll-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    background: #ffffff !important;
    border-radius: 6px !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.65) !important;
}

.reader-scroll-badge {
    position: absolute !important;
    top: -12px !important;
    left: 16px !important;
    background: #7c3aed !important;
    color: #ffffff !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    padding: 3px 12px !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.45) !important;
    z-index: 5 !important;
}

.reader-scroll-canvas {
    display: block !important;
    border-radius: 6px !important;
}

/* Loading State */
.reader-loading-state {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    color: #e2e8f0 !important;
    z-index: 5 !important;
}

.reader-spinner {
    width: 38px !important;
    height: 38px !important;
    border: 3.5px solid rgba(255, 255, 255, 0.15) !important;
    border-top: 3.5px solid #7c3aed !important;
    border-radius: 50% !important;
    animation: readerSpin 0.8s linear infinite !important;
    margin: 0 auto 12px !important;
}

@keyframes readerSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.reader-loading-text {
    font-size: 0.95rem !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

.reader-error-box {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    padding: 16px 22px !important;
    border-radius: 12px !important;
    color: #fca5a5 !important;
    font-size: 0.95rem !important;
}

.reader-retry-btn {
    display: inline-block !important;
    margin-top: 8px !important;
    color: #ffffff !important;
    background: #ef4444 !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
}

/* Mobile Touch Tap Zones */
.reader-touch-zone {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 20% !important;
    max-width: 140px !important;
    z-index: 3 !important;
    cursor: pointer !important;
    background: transparent !important;
}

.reader-touch-left {
    left: 0 !important;
}

.reader-touch-right {
    right: 0 !important;
}

/* Mobile Bottom Navigation Bar (Hidden on desktop) */
.reader-mobile-bottom-bar {
    display: none;
    background: #12121a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 10px 16px !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
    z-index: 20 !important;
    box-sizing: border-box !important;
}

.reader-mob-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
}

.reader-mob-btn:hover:not(:disabled) {
    background: #7c3aed !important;
    border-color: #7c3aed !important;
}

.reader-mob-btn:disabled {
    opacity: 0.3 !important;
}

.reader-mob-page-indicator {
    color: #94a3b8 !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
}

/* Responsive Media Queries */
@media (max-width: 768px) {
    .book-preview-modal {
        padding: 0 !important;
    }
    .book-preview-modal-content {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        border: none !important;
    }

    .reader-header-bar {
        padding: 10px 14px !important;
    }

    .reader-nav-controls,
    .reader-zoom-group,
    .reader-floating-side-btn,
    #reader-fullscreen-btn {
        display: none !important;
    }

    .reader-mobile-bottom-bar {
        display: flex !important;
    }

    .book-preview-modal-body {
        padding: 12px 6px 16px !important;
    }
}