:root {
    --gp-green: #6BA539;
    --gp-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
    --dock-shadow: 0 10px 35px rgba(0, 0, 0, 0.22);
}

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

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;
}

/* ================================================= */
/* BODY                                              */
/* ================================================= */

body {
    display: flex;

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

    background: linear-gradient(
        180deg,
        #F7FBF5 0%,
        #EDF5E8 100%
    );

    font-family: Arial, Helvetica, sans-serif;
}

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

#book {
    position: relative;

    width: min(
        100vw,
        calc(100vh * 1800 / 1273)
    ) !important;

    height: 100%;

    margin: 0 auto;

    overflow: visible;
}

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

.page {
    background: #fff;

    overflow: hidden;

    border-radius: 7px;

    box-shadow: var(--gp-shadow);
}

.page img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

/* ================================================= */
/* FLOATING DOCK                                    */
/* ================================================= */

#viewerDock {
    position: fixed !important;

    left: 50% !important;
    bottom: 28px !important;

    transform: translateX(-50%) !important;

    display: flex;
    align-items: center;

    width: max-content;
    height: 46px;

    gap: 0;

    padding: 8px 14px;

    background: var(--gp-green);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-radius: 999px;

    box-shadow: var(--dock-shadow);

    z-index: 99999;

    white-space: nowrap;

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}

/* ================================================= */
/* DOCK BUTTONS                                     */
/* ================================================= */

#viewerDock button {
    border: 0;
    margin: 0;

    background: none;

    color: #fff;

    cursor: pointer;

    line-height: 1;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

#viewerDock button:hover {
    color: #fff;

    transform: scale(1.1);
}

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

#prevBtn,
#nextBtn {
    width: 34px;

    padding: 0;

    font-size: 20px;
}

/* ================================================= */
/* COUNTER                                          */
/* ================================================= */

#pageCounter {
    width: 70px;
    min-width: 70px;

    padding: 0;

    text-align: center;

    color: #fff;

    font-size: 14px;
    font-weight: 600;

    white-space: nowrap;
}

/* ================================================= */
/* ZOOM                                             */
/* ================================================= */

#zoomOutBtn,
#zoomInBtn {
    width: 30px;

    padding: 0;

    font-size: 19px;
}

#zoomResetBtn {
    width: 52px;

    padding: 0;

    color: #fff;

    font-size: 14px;
}

/* ================================================= */
/* DOWNLOAD                                         */
/* ================================================= */

#downloadBtn {
    width: 78px;

    padding: 0;

    color: #fff;

    font-size: 15px;
}

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

#fullscreenBtn {
    width: 32px;

    padding: 0;

    font-size: 19px;
}

/* ================================================= */
/* DIVIDERS                                         */
/* ================================================= */

.divider {
    width: 1px;
    height: 21px;

    flex: none;

    margin: 0 5px;

    background: rgba(255, 255, 255, 0.45);
}

/* ================================================= */
/* DOCK HIDDEN                                      */
/* ================================================= */

#viewerDock.dock-hidden {
    opacity: 0;

    transform:
        translateX(-50%)
        translateY(18px) !important;

    pointer-events: none;
}

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

@media (max-width: 768px) {

    body {
        overflow: hidden;

        height: 100vh;
        min-height: 100vh;
        max-height: 100vh;
    }

    #book {
        width: 100vw !important;

        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;

        margin: 0 auto;

        overflow: visible;
    }

    .page {
        border-radius: 5px;

        box-shadow:
            0 18px 45px rgba(0, 0, 0, 0.15);
    }

    /* --------------------------------------------- */
    /* MOBILE DOCK                                   */
    /* --------------------------------------------- */

    #viewerDock {
        left: 50% !important;
        bottom: 12px !important;

        width: max-content;
        height: 38px;

        gap: 7px;

        padding: 7px 11px;

        transform: translateX(-50%) !important;

        max-width: calc(100vw - 20px);
    }

    #viewerDock button {
        width: auto;

        padding: 0;

        color: #fff;
    }

    #prevBtn,
    #nextBtn {
        font-size: 17px;
    }

    #pageCounter {
        width: auto;
        min-width: 44px;

        color: #fff;

        font-size: 10px;
    }

    #zoomOutBtn,
    #zoomInBtn {
        width: auto;

        font-size: 17px;
    }

    #zoomResetBtn {
        width: auto;

        font-size: 13px;
    }

    #downloadBtn {
        width: auto;

        font-size: 14px;
    }

    #fullscreenBtn {
        width: auto;

        font-size: 17px;
    }

    .divider {
        height: 16px;

        margin: 0;

        background: rgba(255, 255, 255, 0.45);
    }
}

/* ================================================= */
/* SMALL PHONES                                     */
/* ================================================= */

@media (max-width: 420px) {

    #viewerDock {
        gap: 6px;

        padding: 7px 10px;
    }

    #zoomResetBtn {
        font-size: 12px;
    }

    #downloadBtn {
        font-size: 13px;
    }

    #pageCounter {
        min-width: 42px;
    }
}

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

@media (max-width: 768px) and (orientation: landscape) {

    #viewerDock {
        bottom: 8px !important;
    }
}