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

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

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    
    background:#1c1c1c;
    color:#fff;
    
    font-family:
    "Segoe UI",
    Arial,
    sans-serif;
}

/* ===========================================================
 *  MAIN LAYOUT
 = *========================================================== */

#viewer{
width:100%;
height:100%;

display:flex;
flex-direction:column;
}

#topBar,
#bottomBar{

height:64px;

background:#111;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 20px;

flex-shrink:0;

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

z-index:50;
}

#companyText{

font-size:20px;

font-weight:600;

letter-spacing:.5px;
}

#companyLogo{

height:42px;

width:auto;
}

/* ===========================================================
 *  BOOK AREA
 = *========================================================== */

#bookArea{

flex:1;

position:relative;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

background:
radial-gradient(circle,#353535 0%,#202020 100%);
}

#bookWrapper{

position:relative;

display:flex;

justify-content:center;

align-items:center;
}



/* ===========================================================
 *  NAVIGATION BUTTONS
 = *========================================================== */

.navArrow{
    
    position:absolute;
    
    top:50%;
    
    transform:translateY(-50%);
    
    width:60px;
    
    height:60px;
    
    border:none;
    
    border-radius:50%;
    
    background:rgba(0,0,0,.55);
    
    color:white;
    
    font-size:28px;
    
    cursor:pointer;
    
    transition:.25s;
    
    z-index:200;
    
    opacity:.35;
}

.navArrow:hover{
    
    background:#444;
    
    transform:
    translateY(-50%)
    scale(1.08);
}

#prevPage{

left:30px;
}

#nextPage{

right:30px;
}

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

.toolbarGroup{
    
    display:flex;
    
    gap:10px;
}

.toolbarGroup button{
    
    display:flex;
    
    align-items:center;
    
    gap:6px;
    
    background:#262626;
    
    color:white;
    
    border:none;
    
    border-radius:8px;
    
    padding:10px 14px;
    
    cursor:pointer;
    
    transition:.2s;
}

.toolbarGroup button:hover{
    
    background:#3a3a3a;
}

.toolbarGroup span{
    
    font-size:14px;
}

#pageCounter{

font-weight:bold;

font-size:18px;

min-width:100px;

text-align:center;
}

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

#loadingScreen{

position:fixed;

inset:0;

background:#181818;

display:flex;

justify-content:center;

align-items:center;

z-index:5000;
}

.loadingContent{
    
    width:min(420px,90%);
    
    text-align:center;
}

.loadingLogo{
    
    width:140px;
    
    animation:
    
    pulse
    
    1.8s
    
    infinite;
    
    margin-bottom:25px;
}
@keyframes pulse{
    
    0%{
        
        transform:scale(.95);
        
    }
    
    50%{
        
        transform:scale(1);
        
    }
    
    100%{
        
        transform:scale(.95);
        
    }
    
}

#loadingTitle{

margin-bottom:20px;

font-weight:500;
}

.loadingBar{
    
    width:100%;
    
    height:12px;
    
    background:#444;
    
    border-radius:999px;
    
    overflow:hidden;
    
    margin-bottom:15px;
}

#loadingProgress{

width:0%;

height:100%;

background:

linear-gradient(
    
    90deg,
    
    #45a8ff,
    
    #7bd4ff
    
);

transition:width .15s linear;
}

#loadingPercent{

color:#ddd;
}

/* ===========================================================
 *  THUMBNAIL OVERLAY
 = *========================================================== */

#thumbOverlay{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.75);

    z-index:3000;

}

#thumbWindow{

width:min(1100px,95vw);

height:min(750px,90vh);

background:#252525;

border-radius:14px;

overflow:hidden;

display:flex;

flex-direction:column;
}

#thumbHeader{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px;

border-bottom:1px solid #444;
}

#closeThumbs{

background:#444;

color:white;

border:none;

border-radius:8px;

padding:8px 16px;

cursor:pointer;
}

#thumbGrid{
    flex:1;
    overflow:auto;
    padding:20px;
    display:grid;
    grid-template-columns:
    repeat(auto-fill,minmax(170px,1fr));
    gap:20px;
    place-items: center; 
}

/* thumbnails added later */

.thumb {
    width: 149px;
    height: 210px;
    display: inline-block;
    position: relative;
    border: 1px solid #ccc;
    overflow: hidden;
}

.thumb canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.thumb div {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
}


.thumb:hover{
    
    transform:scale(1.03);
}

.icons{
    height:30px;
}

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

@media (max-width:900px){
    
    #topBar,
    #bottomBar{
    
    height:56px;
    
    padding:0 10px;
    }
    
    .toolbarGroup span{
        
        display:none;
    }
    
    .toolbarGroup button{
        
        padding:none;
        background:none;
        padding:none;
    }
    
    #companyText{
    
    font-size:16px;
    }
    
    #companyLogo{
    
    height:23px;
    }
    
    .navArrow{
        
        width:46px;
        
        height:46px;
        
        font-size:22px;
    }
    
    #prevPage{
    
    left:8px;
    }
    
    #nextPage{
    
    right:8px;
    }
    
}







.pageLoading{
    
    width:100%;
    height:100%;
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    background:
    
    repeating-linear-gradient(
        
        45deg,
        
        #ececec,
        
        #ececec 18px,
        
        #e3e3e3 18px,
        
        #e3e3e3 36px
        
    );
    
    color:#666;
    
    font-size:18px;
    
}


#bookArea:hover .navArrow{

opacity:1;

}

#flipbook {
transition: margin-left 1s ease; /* Adjust duration and timing as desired */
-webkit-transition: margin-left 1s ease; /* For Safari support */
-moz-transition: margin-left 1s ease; /* For Firefox support */
}

#flipbook {
overflow:visible;
margin: 0 auto;
display: block;
position: relative;
}

#flipbook canvas{
width:100%;
height:100%;
display:block;
}


#pageCounter {
position: absolute;

left: 50%;
transform: translateX(-50%);

white-space: nowrap;
}