.fileHolder .toolbar {
    margin-bottom: 20px;
}

.fileHolder button {
    padding: 10px 20px;
    cursor: pointer;
}

.fileHolder #flipbook {
    width: 100%;
    height: 100vh;
    margin: auto;
}

.fileHolder .page {
    background: white;
}

.fileHolder .page canvas {
    width: 100%;
    height: 100%;
}
.fileHolder #fileLoader {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh;
    font-size: 16px;
}
.fileHolder button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.intro-page{
    width:100%;
    height:100%;
    display:flex;
    gap:10px;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:40px;
    background:#f8f8f8;
    color:#666;
    font-size:16px;
    line-height:1.4;
}
.download-container{transition: max-width 0.3s ease-in-out, width 0.3s ease-in-out;}
.big-popup {
    max-width: 60%;
    height: auto;
}
.stf__wrapper {
    padding: 0 !important;
}
/* RTL flipbook: mirror the whole book so the pages turn right-to-left,
   then un-mirror the leaf content (canvas / intro-page) so it reads correctly.
   The un-mirror MUST be on the canvas/intro-page, NOT on .page: during a flip
   StPageFlip overwrites .page's inline transform (translate + rotate), which
   would strip a .page-level un-mirror and show the text mirrored mid-flip.
   The canvas/intro-page are never touched by the library, so un-mirroring them
   survives the animation, and the two reflections (book + canvas) cancel for
   content orientation while still reversing the fold direction for RTL. */
[dir=rtl] #flipbook {
    transform: scaleX(-1);
}
[dir=rtl] #flipbook canvas,
[dir=rtl] #flipbook .intro-page {
    transform: scaleX(-1);
}

[dir=rtl] .prevBtn i, [dir=rtl] .nextBtn i{transform:rotate(180deg);}
@media(max-width:1500px){
    .fileHolder #flipbook {height:100vh;}
}
@media(max-width:1400px){
    .fileHolder #flipbook {height:95vh;}
}
@media(max-width:1300px){
    .fileHolder #flipbook {height:90vh;}
}
@media(max-width:1200px){
    .fileHolder #flipbook {height:85vh;}
}
@media(max-width:1100px){
    .fileHolder #flipbook {height:80vh;}
}
@media(max-width:768px){
    .big-popup {max-width: 100%; min-height:50vh; height: fit-content; padding: 10px;}
        .stf__item {
        top: 0 !important;
    }

    .stf__item.--right,
    .stf__item.--left {
        top: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .stf__parent{height:auto !important;}
    .fileHolder #fileLoader{height: 50vh;}
    .fileHolder #flipbook {height:100vh;}
    .fileHolder .toolbar {margin-bottom: 50px;}
}

/* Mobile/tablet vertical scroll view (replaces the flipbook on small screens) */
#pdfScroll {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 8px;
}
#pdfScroll .pdf-page {
    width: 100%;
    background: #fff;
    margin-bottom: 12px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}
#pdfScroll .pdf-page canvas {
    width: 100%;
    height: auto;
    display: block;
}