/* ==============================
   ASHBORN BOOKS EPUB READER CSS
   ============================== */

*{
    Margin:0;
    Padding:0;
    Box-sizing:border-box;
}

Body{
    Font-family: Georgia, "Times New Roman", serif;
    Background:#f7f7f7;
    Color:#222;
    Height:100vh;
    Overflow:hidden;
}


/* ==============================
   TOP BAR
   ============================== */

.topbar{

    Height:65px;
    Width:100%;
    Background:#ff7a00;
    Color:white;

    Display:flex;
    Align-items:center;
    Justify-content:space-between;

    Padding:0 20px;

    Box-shadow:0 2px 10px rgba(0,0,0,0.2);

    Position:relative;
    z-index:10;

}


.logo{

    Font-size:22px;
    Font-weight:bold;
    Letter-spacing:1px;

}


.book-title{

    Font-size:18px;
    Font-weight:bold;
    Text-align:center;

}


.controls button{

    Background:white;
    Color:#ff7a00;

    Border:none;
    Padding:8px 12px;

    Margin-left:5px;

    Border-radius:6px;

    Cursor:pointer;

    Font-size:16px;

}


.controls button:hover{

    Background:#eee;

}


/* ==============================
   TABLE OF CONTENT PANEL
   ============================== */

.toc-panel{

    Position:absolute;

    Left:0;
    Top:65px;

    Width:260px;
    Height:calc(100vh – 65px);

    Background:white;

    Padding:20px;

    Overflow-y:auto;

    Box-shadow:2px 0 10px rgba(0,0,0,.15);

    Transform:translateX(-100%);

    Transition:.3s;

    z-index:5;

}


.toc-panel.active{

    Transform:translateX(0);

}


.toc-panel h2{

    Color:#ff7a00;

    Margin-bottom:20px;

}


#tocList{

    List-style:none;

}


#tocList li{

    Padding:10px;

    Border-bottom:1px solid #ddd;

    Cursor:pointer;

}


#tocList li:hover{

    Background:#fff1e6;

}


/* ==============================
   READER AREA
   ============================== */

.reader-container{

    Height:calc(100vh – 125px);

    Display:flex;

    Align-items:center;

    Justify-content:center;

    Gap:20px;

    Padding:20px;

}


#viewer{

    Width:80%;

    Height:100%;

    Background:white;

    Border-radius:10px;

    Box-shadow:0 0 20px rgba(0,0,0,.15);

    Overflow:hidden;

}


/* Navigation Buttons */

.navButton{

    Width:50px;
    Height:50px;

    Border:none;

    Border-radius:50%;

    Background:#ff7a00;

    Color:white;

    Font-size:25px;

    Cursor:pointer;

}


.navButton:hover{

    Background:#e06b00;

}



/* ==============================
   BOTTOM BAR
   ============================== */

.bottomBar{

    Height:60px;

    Background:white;

    Display:flex;

    Align-items:center;

    Justify-content:center;

    Flex-direction:column;

    Box-shadow:0 -2px 10px rgba(0,0,0,.1);

}


.progressArea{

    Width:80%;

}


#progressBar{

    Width:100%;

}


.pageButtons button{

    Margin:5px;

    Padding:6px 15px;

    Background:#ff7a00;

    Color:white;

    Border:none;

    Border-radius:5px;

    Cursor:pointer;

}


/* ==============================
   SETTINGS PANEL
   ============================== */

.settingsPanel{

    Position:absolute;

    Right:20px;

    Top:80px;

    Background:white;

    Padding:20px;

    Border-radius:10px;

    Box-shadow:0 0 15px rgba(0,0,0,.2);

}


.settingsPanel h3{

    Color:#ff7a00;

    Margin-bottom:15px;

}


.settingsPanel select{

    Padding:8px;

    Border-radius:5px;

}



/* ==============================
   LOADING SCREEN
   ============================== */


#loadingScreen{

    Position:fixed;

    Top:0;
    Left:0;

    Width:100%;
    Height:100%;

    Background:white;

    Display:flex;

    Align-items:center;

    Justify-content:center;

    Flex-direction:column;

    z-index:20;

}


#loadingScreen h2{

    Color:#ff7a00;

    Margin-bottom:10px;

}



/* ==============================
   DARK MODE
   ============================== */


Body.dark{

    Background:#121212;

    Color:white;

}


Body.dark #viewer{

    Background:#222;

}


Body.dark .settingsPanel,
Body.dark .bottomBar,
Body.dark .toc-panel{

    Background:#1e1e1e;

    Color:white;

}



Body.dark .settingsPanel h3{

    Color:#ff7a00;

}


/* ==============================
   SEPIA MODE
   ============================== */


Body.sepia{

    Background:#f4ecd8;

}


Body.sepia #viewer{

    Background:#f4ecd8;

}



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


@media(max-width:768px){


.topbar{

    Padding:0 10px;

}


.logo{

    Font-size:16px;

}


.book-title{

    Display:none;

}


.controls button{

    Padding:6px 8px;

}


.reader-container{

    Height:calc(100vh - 125px);

    Gap:5px;

}


#viewer{

    Width:90%;

}


.navButton{

    Width:35px;

    Height:35px;

    Font-size:18px;

}


.settingsPanel{

    Right:10px;

    Top:75px;

    Width:90%;

}


}



/* ==============================
   FULLSCREEN MODE
   ============================== */


Body.fullscreen .topbar,
Body.fullscreen .
{

    Display:none;

}


Body.fullscreen .reader-container{

    Height:100vh
}