/* =========================================================
   dflip-lite.css – minimal layout + toolbar for DearFlip 2.4.x
   Use this if you don't have the official dflip.min.css (v2).
   No icon font needed: icons are plain Unicode characters.
   ========================================================= */

.df-app { position: relative; }
.df-container { position: relative; width: 100%; height: 100%; overflow: hidden; user-select: none; }
.df-container .df-bg { position: absolute; inset: 0; z-index: 0; }

/* Book area (height is set inline by DearFlip) */
.df-viewer-container { position: absolute; top: 0; bottom: 0; z-index: 1; overflow: hidden; }
.df-viewer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.df-viewer canvas.df-3dcanvas { position: absolute; top: 0; left: 0; }
.df-csscanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.df-zoomview { display: none; overflow: auto; }
.df-zoom-active .df-zoomview { display: block; }
.df-zoom-active .df-flipbook { visibility: hidden; }
.df-hidden { display: none !important; }

/* Loading */
.df-loading-info, .df-loading-icon { display: none; }
.df-loading .df-loading-info {
    display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    z-index: 5; padding: 6px 14px; border-radius: 4px; background: rgba(0,0,0,.6); color: #fff; font: 13px/1.4 sans-serif;
}
.df-comment-popup { display: none; }

/* Side menu (thumbnails / outline / search) */
.df-sidemenu-wrapper {
    position: absolute; top: 0; bottom: 48px; left: 0; width: 220px; z-index: 20;
    background: #fff; box-shadow: 2px 0 10px rgba(0,0,0,.25); overflow-y: auto;
    transform: translateX(-105%); transition: transform .25s ease;
}
.df-sidemenu-open .df-sidemenu-wrapper, .df-sidemenu-visible { transform: none; }
.df-sidemenu-buttons { display: flex; justify-content: flex-end; padding: 4px; }

/* ---------- Toolbar ---------- */
.df-ui {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 4px 8px; background: #fff; border-top: 1px solid #ddd; box-sizing: border-box;
}
.df-controls-top .df-ui { top: 0; bottom: auto; border-top: 0; border-bottom: 1px solid #ddd; }
.df-float-on .df-ui {
    left: 50%; right: auto; bottom: 10px; transform: translateX(-50%);
    border: 0; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.df-ui-left, .df-ui-center, .df-ui-right { display: flex; align-items: center; gap: 2px; }

.df-ui-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 4px; cursor: pointer;
    color: #444; font: 18px/1 Arial, "Segoe UI Symbol", sans-serif; box-sizing: border-box;
}
.df-ui-btn:hover { background: #eee; color: #000; }
.df-ui-btn.disabled { opacity: .35; pointer-events: none; }
.df-ui-btn > span { display: none; }

/* Page number box */
.df-ui-page { width: auto; padding: 0 6px; font-size: 13px; cursor: default; }
.df-ui-page:hover { background: none; }
.df-ui-page input {
    width: 46px; height: 26px; margin-right: 4px; text-align: center;
    border: 1px solid #ccc; border-radius: 3px; font: inherit;
}
.df-ui-page label { white-space: nowrap; color: #555; }

/* "More" drop-up menu */
.df-more-container {
    display: none; position: absolute; bottom: 42px; right: 0; min-width: 180px; padding: 4px 0;
    background: #fff; border-radius: 4px; box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.df-more-container.df-active, .df-ui-more.df-active .df-more-container { display: block; }
.df-more-container .df-ui-btn { display: flex; justify-content: flex-start; width: 100%; padding: 0 12px; gap: 8px; }
.df-more-container .df-ui-btn > span { display: inline; font-size: 13px; }

/* Prev / next arrows on the sides of the book */
.df-ui-nav {
    position: absolute; top: 50%; z-index: 9; transform: translateY(-50%); margin-top: -22px; cursor: pointer;
}
.df-ui-nav .df-ui-btn {
    width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.9);
    box-shadow: 0 2px 6px rgba(0,0,0,.3); font-size: 22px;
}
.df-ui-prev { left: 8px; }
.df-ui-next { right: 8px; }

/* Icons (Unicode, no font files) */
.df-icon-list::before        { content: "\2630"; }
.df-icon-grid-view::before   { content: "\25A6"; }
.df-icon-add-circle::before  { content: "+"; font-weight: bold; font-size: 22px; }
.df-icon-minus-circle::before{ content: "\2212"; font-weight: bold; font-size: 22px; }
.df-icon-fullscreen::before  { content: "\26F6"; }
.df-icon-search::before      { content: "\2315"; font-size: 22px; }
.df-icon-more::before        { content: "\22EE"; font-weight: bold; }
.df-icon-close::before       { content: "\2715"; }
.df-icon-arrow-left1::before { content: "\2039"; font-size: 30px; }
.df-icon-arrow-right1::before{ content: "\203A"; font-size: 30px; }
.df-icon-double-page::before { content: "\25AF\25AF"; font-size: 12px; }
.df-icon-file::before        { content: "\25AF"; }
.df-icon-fit-screen::before  { content: "\2922"; }
.df-icon-first-page::before  { content: "\21E4"; }
.df-icon-last-page::before   { content: "\21E5"; }
.df-icon-volume::before      { content: "\266A"; }
.df-icon-share::before       { content: "\21AA"; }
.df-icon-download::before    { content: "\2193"; }
.df-icon-print::before       { content: "\2399"; }
.df-icon-play::before        { content: "\25B6"; }
.df-icon-pause::before       { content: "\23F8"; }

/* Fullscreen */
.df-container.df-fullscreen { position: fixed !important; inset: 0; z-index: 99999; background: #333; }

@media (max-width: 600px) {
    .df-ui-btn { width: 32px; height: 32px; font-size: 16px; }
    .df-ui-page input { width: 38px; }
    .df-ui-nav .df-ui-btn { width: 34px; height: 34px; }
}