/*==================================================
                    RESET
==================================================*/

*{
    margin:0;
    
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:Arial,Helvetica,sans-serif;
    background:#ececec;
    color:#222;
}

/*==================================================
                    VARIABLES
==================================================*/

:root{

    --header-height: 45px;
    --control-height: 82px;
    --toolbar-height: 62px;


    --primary:#0B5ED7;
    --dark:#121212;
    --light:#ffffff;
    --border:#d8d8d8;

    --shadow:0 3px 18px rgba(0,0,0,.12);

}

/*==================================================
                    LOADER
==================================================*/

#readerLoader{

    position:fixed;
    inset:0;

    background:#fff;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    z-index:99999;

    transition:.3s;

}

.loader-circle{

    width:60px;
    height:60px;

    border:5px solid #ddd;
    border-top:5px solid var(--primary);

    border-radius:50%;

    animation:spin .8s linear infinite;

}

#readerLoader p{

    margin-top:18px;
    font-size:15px;
    color:#444;

}

@keyframes spin{

    to{
        transform:rotate(360deg);
    }

}

/*==================================================
                    HEADER
==================================================*/

.reader-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:var(--header-height);

    

    background:#fff;

    z-index:1000;

    box-shadow:var(--shadow);
    margin-bottom: 0;

}

.reader-top{

    height:100%;

    display:flex;

    align-items:center;
    justify-content:space-between;

}

.reader-top .left,
.reader-top .center,
.reader-top .right{

    display:flex;
    align-items:center;

}

.reader-top .center{

    flex-direction:column;
    justify-content:center;
    flex:1;

}

#bookTitle{

    font-size:17px;
    padding-top: 5px;
    font-weight:700;

    text-align:center;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    max-width:80%;

}

.reader-top p{

    margin:0;
    font-size:13px;
    color:#777;

}

.back-btn{

    text-decoration:none;

    color:#222;

    font-weight:600;

    display:flex;

    align-items:center;
    gap:8px;

}

.back-btn:hover{

    color:var(--primary);

}

#fullscreenBtn{

    border:none;
    background:none;

    width:42px;
    height:42px;

    border-radius:50%;

    cursor:pointer;

    transition:.3s;

}

#fullscreenBtn:hover{

    background:#eee;

}

/*==================================================
                PAGE CONTROLS
==================================================*/

.page-controls{

    position:fixed;

    top:var(--header-height);

    left:0;

    width:100%;

    background:#fff;

    z-index:999;

    box-shadow:var(--shadow);

}

.page-navigation{

    display:flex;

    align-items:center;
    justify-content:center;

    gap:18px;

    padding:12px 0;

}

.page-btn{

    border:none;

    background:var(--primary);

    color:#fff;

    border-radius:6px;

    padding:9px 18px;

    transition:.3s;

}

.page-btn:hover{

    transform:translateY(-1px);

}

.page-number{

    display:flex;

    align-items:center;

    gap:8px;

}

#pageNumber{

    width:65px;
    text-align:center;

}

.slider-wrap{

    padding:0 15px 12px;

}

#pageSlider{

    width:100%;

}

/*==================================================
                PDF CONTAINER
==================================================*/

.reader-container{

    position:fixed;

    top:calc(var(--header-height) + var(--control-height));

    left:0;

    width:100%;

    height:calc(
        100vh -
        var(--header-height) -
        var(--control-height) -
        var(--toolbar-height)
    );

    overflow:auto;

    background:#bfbfbf;

}

/* main scrolling area */

.pdf-area{

    width:100%;
    min-height:100%;

    display:flex;

    justify-content:center;
    align-items:flex-start;
    -webkit-overflow-scrolling:touch;
    overflow:auto;

    padding:20px;

}


.pdf-area{
    position:relative;
}

.side-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:50px;
    height:50px;

    border:none;
    background:transparent;

    color:#007BFF;
    font-size:42px;
    cursor:pointer;

    z-index:999;
    transition:.25s;
}

.side-arrow:hover{
    transform:translateY(-50%) scale(1.15);
    color:#ff4d00;
}

.side-arrow.left{
    left:10px;
}

.side-arrow.right{
    right:10px;
}

/* IMPORTANT */

#pdfViewer{

    display:inline-block;

    transform-origin:top left;

}



/*==================================================
                    CANVAS
==================================================*/

#pdfCanvas{

    display:block;

    background:#fff;

    box-shadow:0 5px 25px rgba(0,0,0,.28);

    image-rendering:auto;

    max-width:none;

}

/*==================================================
                TOOLBAR
==================================================*/

.reader-toolbar{

    position:fixed;

    bottom:0;
    left:0;

    width:100%;
    height:var(--toolbar-height);

    background:#fff;

    display:flex;

    justify-content:center;
    align-items:center;

    gap:14px;

    box-shadow:0 -3px 15px rgba(0,0,0,.15);

    z-index:999;

}

.reader-toolbar button{

    width:48px;
    height:48px;

    border:none;

    background:#f5f5f5;

    border-radius:50%;

    transition:.25s;

    cursor:pointer;

}

.reader-toolbar button:hover{

    background:var(--primary);

    color:#fff;

}

/*==================================================
                MODES
==================================================*/

body.reading-mode .reader-header,
body.reading-mode .page-controls{

    display:none;

}

body.reading-mode .reader-container{

    top:0;

    height:calc(100vh - var(--toolbar-height));

}

body.dark-mode{

    background:#111;

}

body.dark-mode .reader-header,
body.dark-mode .page-controls,
body.dark-mode .reader-toolbar{

    background:#1d1d1d;
    color:#eee;

}

body.eye-mode{

    background:#f4ecd8;

}

body.eye-mode .reader-container{

    background:#d8cfb6;

}

/*==================================================
                MOBILE
==================================================*/

@media(max-width:768px){

    :root{

        --header-height: 45px;
        --control-height: 82px;
        --toolbar-height: 62px;

    }

    #bookTitle{

        font-size:10px;
        padding-top: 5px;

    }

    .reader-top p{

        display:none;

    }

    .page-navigation{

        gap:30px;
        flex-wrap:wrap;

    }

    .page-btn{

        padding:6px 8px;
        font-size:10px;

    }

    #pageNumber{

        width:20px;
        font-size: 10px;
        text-align:center;

    }

    .pdf-area{

        justify-content:flex-start;

        overflow:auto;

        -webkit-overflow-scrolling:touch;

        touch-action:pan-x pan-y;

        padding:12px;

    }

    #pdfViewer{

        min-width:max-content;

    }

    #pdfCanvas{

        box-shadow:none;

    }

    .reader-toolbar{

        gap:8px;

    }

    .reader-toolbar button{

        width:42px;
        height:42px;

    }

    *{
        font-size: 10px;
    }

     .back-btn{

        font-size:12px;

    }

}


@media (max-width:768px){

    .side-arrow{
        width:40px;
        height:40px;
        font-size:34px;
    }

    .side-arrow.left{
        left:4px;
    }

    .side-arrow.right{
        right:4px;
    }

    .side-arrow i{
        font-size:20px;
    }

}