/* =========================================================
   PAINE COLLEGE FLIPDOC
   ========================================================= */

.paine-flipdoc {
    --pfd-purple: #4E008E;
    --pfd-gold: #CDA177;
    --pfd-dark: #17151b;
    --pfd-panel: #232027;
    --pfd-light: #ffffff;
    --pfd-muted: #aaa4b0;

    position: relative;
    width: 100%;
    background: var(--pfd-dark);
    color: var(--pfd-light);
    overflow: hidden;
    font-family: inherit;
}


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

.pfd-toolbar {
    min-height: 64px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    gap: 20px;

    padding: 8px 18px;

    background: var(--pfd-purple);

    position: relative;
    z-index: 50;
}


.pfd-toolbar-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}


.pfd-toolbar-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}


.pfd-title {
    font-weight: 700;
    text-align: center;
    font-size: 16px;
    line-height: 1.2;
}


.pfd-button {
    appearance: none;

    border: 0;

    background: rgba(255, 255, 255, 0.12);

    color: white;

    min-height: 40px;

    padding: 0 14px;

    border-radius: 4px;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    text-decoration: none;

    font: inherit;

    line-height: 1;
}


.pfd-button:hover,
.pfd-button:focus {
    background: rgba(255, 255, 255, 0.23);
    color: #ffffff;
}


.pfd-button:focus-visible {
    outline: 2px solid var(--pfd-gold);
    outline-offset: 2px;
}


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

.pfd-reader {
    display: flex;

    position: relative;

    min-height: 720px;

    overflow: hidden;
}


.pfd-main {
    flex: 1;

    min-width: 0;

    min-height: 720px;

    position: relative;

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

    padding: 8px 24px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            #363139 0%,
            #211e24 65%,
            #161418 100%
        );
}


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

.pfd-stage {
    position: relative;

    width: 100%;

    max-width: 1200px;

    height: 680px;

    min-width: 0;

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

    overflow: visible;
}


.pfd-book {
    margin: 0 auto;

    position: relative;

    max-width: 100%;
}


.pfd-page {
    background: #ffffff;

    overflow: hidden;
}


.pfd-page-canvas {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;
}


/* =========================================================
   PAGE SHADOW / BOOK APPEARANCE
   ========================================================= */

.stf__parent {
    margin: 0 auto;
}


.stf__block {
    margin: 0 auto;
}


.pfd-book .stf__item {
    background: #ffffff;
}


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

.pfd-loading {
    position: absolute;

    inset: 0;

    z-index: 40;

    background: var(--pfd-dark);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 12px;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


.pfd-loading-hidden {
    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


.pfd-spinner {
    width: 42px;

    height: 42px;

    border:
        4px solid
        rgba(
            255,
            255,
            255,
            0.2
        );

    border-top-color: var(--pfd-gold);

    border-radius: 50%;

    animation:
        pfd-spin
        0.8s
        linear
        infinite;
}


@keyframes pfd-spin {

    to {
        transform: rotate(360deg);
    }

}


.pfd-loading-message {
    font-weight: 600;

    text-align: center;

    padding: 0 20px;
}


.pfd-loading-progress {
    color: var(--pfd-muted);
}


/* =========================================================
   SIDE NAVIGATION ARROWS
   ========================================================= */

.pfd-arrow {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 25;

    width: 50px;

    height: 70px;

    border: 0;

    background: rgba(0, 0, 0, 0.35);

    color: white;

    font-size: 44px;

    font-weight: 200;

    line-height: 1;

    cursor: pointer;

    border-radius: 3px;
}


.pfd-arrow:hover,
.pfd-arrow:focus {
    background: var(--pfd-purple);
}


.pfd-arrow:focus-visible {
    outline: 2px solid var(--pfd-gold);
}


.pfd-prev {
    left: 10px;
}


.pfd-next {
    right: 10px;
}


/* =========================================================
   THUMBNAIL SIDEBAR
   ========================================================= */

.pfd-sidebar {
    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    width: 360px;

    max-width: 90vw;

    z-index: 60;

    background: #1b191d;

    overflow: hidden;

    transform: translateX(-100%);

    transition: transform 0.25s ease;

    box-shadow:
        10px
        0
        35px
        rgba(
            0,
            0,
            0,
            0.45
        );
}


/*
 * Opens over viewer instead of pushing it.
 */
.pfd-sidebar-open
.pfd-sidebar {
    transform: translateX(0);
}


.pfd-sidebar-heading {
    height: 58px;

    padding: 0 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );

    background: #1b191d;

    position: sticky;

    top: 0;

    z-index: 2;
}


.pfd-sidebar-heading strong {
    font-size: 15px;

    letter-spacing: 0.01em;
}


.pfd-sidebar-close {
    border: 0;

    background: transparent;

    color: white;

    font-size: 28px;

    line-height: 1;

    cursor: pointer;

    width: 36px;

    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 3px;
}


.pfd-sidebar-close:hover,
.pfd-sidebar-close:focus {
    background: rgba(255, 255, 255, 0.1);
}


/* =========================================================
   THUMBNAIL SCROLLER
   ========================================================= */

.pfd-thumbnails {
    height: calc(100% - 58px);

    padding: 18px;

    overflow-y: auto;

    overflow-x: hidden;

    overscroll-behavior: contain;

    scrollbar-width: thin;

    box-sizing: border-box;
}


/* =========================================================
   THUMBNAIL CARD
   ========================================================= */

.pfd-thumbnail {
    display: block;

    width: 100%;

    box-sizing: border-box;

    padding: 10px;

    margin: 0 0 22px;

    border:
        2px solid
        transparent;

    border-radius: 5px;

    background:
        rgba(
            255,
            255,
            255,
            0.035
        );

    color: white;

    cursor: pointer;

    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        transform 0.15s ease;
}


.pfd-thumbnail:hover {
    border-color:
        rgba(
            205,
            161,
            119,
            0.65
        );

    background:
        rgba(
            255,
            255,
            255,
            0.07
        );

    transform: translateY(-1px);
}


.pfd-thumbnail.active {
    border-color: var(--pfd-gold);

    background:
        rgba(
            205,
            161,
            119,
            0.08
        );
}


.pfd-thumbnail canvas {
    display: block;

    width: 100%;

    height: auto;

    background: #ffffff;

    box-shadow:
        0
        8px
        26px
        rgba(
            0,
            0,
            0,
            0.48
        );

    border-radius: 2px;

    image-rendering: auto;
}


.pfd-thumbnail span {
    display: block;

    margin-top: 9px;

    text-align: center;

    font-size: 13px;

    font-weight: 600;

    color: rgba(255, 255, 255, 0.9);
}


/* =========================================================
   FOOTER
   ========================================================= */

.pfd-footer {
    min-height: 60px;

    padding: 8px 18px;

    background: var(--pfd-panel);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    position: relative;

    z-index: 50;
}


.pfd-footer-button {
    appearance: none;

    border: 0;

    background: transparent;

    color: white;

    cursor: pointer;

    min-height: 40px;

    padding: 0 10px;

    font: inherit;
}


.pfd-footer-button:hover,
.pfd-footer-button:focus {
    color: var(--pfd-gold);
}


.pfd-page-counter {
    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 14px;
}


.pfd-page-counter label {
    display: flex;

    align-items: center;

    gap: 7px;
}


.pfd-page-input {
    width: 60px;

    padding: 6px;

    text-align: center;

    border: 1px solid #59535e;

    border-radius: 3px;

    background: #151317;

    color: white;
}


.pfd-page-input::-webkit-inner-spin-button,
.pfd-page-input::-webkit-outer-spin-button {
    opacity: 0.6;
}


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

.paine-flipdoc:fullscreen {
    width: 100vw;

    height: 100vh;

    display: flex;

    flex-direction: column;

    background: var(--pfd-dark);
}


.paine-flipdoc:-webkit-full-screen {
    width: 100vw;

    height: 100vh;

    display: flex;

    flex-direction: column;

    background: var(--pfd-dark);
}


.paine-flipdoc:fullscreen
.pfd-reader,
.paine-flipdoc:-webkit-full-screen
.pfd-reader {
    flex: 1;

    min-height: 0;
}


.paine-flipdoc:fullscreen
.pfd-main,
.paine-flipdoc:-webkit-full-screen
.pfd-main {
    flex: 1;

    min-height: 0;
}


.paine-flipdoc:fullscreen
.pfd-stage,
.paine-flipdoc:-webkit-full-screen
.pfd-stage {
    height: calc(100vh - 145px);

    max-height: calc(100vh - 145px);
}


/* =========================================================
   CSS FULLSCREEN FALLBACK
   FOR iPHONE / MOBILE SAFARI
   ========================================================= */

html.pfd-fullscreen-lock,
body.pfd-fullscreen-lock {
    overflow: hidden !important;

    overscroll-behavior: none;

    touch-action: none;
}


.paine-flipdoc.pfd-mobile-fullscreen {
    position: fixed !important;

    top: 0 !important;

    right: 0 !important;

    bottom: 0 !important;

    left: 0 !important;

    width: 100vw !important;

    height: 100vh !important;

    max-width: none !important;

    margin: 0 !important;

    padding: 0 !important;

    z-index: 2147483000 !important;

    display: flex;

    flex-direction: column;

    background: var(--pfd-dark);
}


@supports (height: 100dvh) {

    .paine-flipdoc.pfd-mobile-fullscreen {
        height: 100dvh !important;
    }

}


.paine-flipdoc.pfd-mobile-fullscreen
.pfd-toolbar {
    flex: 0 0 auto;
}


.paine-flipdoc.pfd-mobile-fullscreen
.pfd-reader {
    flex: 1;

    min-height: 0;

    height: auto;

    overflow: hidden;
}


.paine-flipdoc.pfd-mobile-fullscreen
.pfd-main {
    flex: 1;

    min-height: 0;

    height: auto;

    padding-top: 15px;

    padding-bottom: 15px;
}


.paine-flipdoc.pfd-mobile-fullscreen
.pfd-stage {
    flex: 1;

    height: auto;

    min-height: 0;

    max-height: calc(100vh - 125px);
}


@supports (height: 100dvh) {

    .paine-flipdoc.pfd-mobile-fullscreen
    .pfd-stage {
        max-height: calc(100dvh - 125px);
    }

}


.paine-flipdoc.pfd-mobile-fullscreen
.pfd-footer {
    flex: 0 0 auto;
}


/* =========================================================
   SINGLE FLIPDOC PAGE
   ========================================================= */

.paine-flipdoc-page {
    margin: 0;

    padding: 0;

    max-width: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .pfd-reader,
    .pfd-main {
        min-height: 620px;
    }


    .pfd-stage {
        height: 590px;
    }


    .pfd-main {
        padding: 8px 18px;
    }


    .pfd-sidebar {
        width: 330px;

        max-width: 88vw;
    }

}


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

@media (max-width: 600px) {

    .pfd-main,
    .pfd-stage,
    .pfd-book {
        touch-action: pan-y;
    }


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

    .pfd-toolbar {
        min-height: auto;

        display: flex;
        flex-wrap: wrap;

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

        gap: 6px 8px;

        padding: 8px 10px;

        background: var(--pfd-purple);
    }


    /*
     * Give the title its own full-width row.
     */
    .pfd-title {
        order: 1;

        flex: 0 0 100%;

        width: 100%;

        margin: 0;

        padding: 3px 6px 6px;

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

        line-height: 1.3;

        text-align: center;

        white-space: normal;

        overflow: visible;

        text-overflow: clip;

        word-break: normal;

        overflow-wrap: anywhere;
    }


    /*
     * Thumbnail/menu controls appear below
     * the title on the left.
     */
    .pfd-toolbar-left {
        order: 2;

        flex: 0 0 auto;

        display: flex;

        align-items: center;

        justify-content: flex-start;

        min-width: 0;
    }


    /*
     * Zoom/fullscreen/download controls appear
     * below the title on the right.
     */
    .pfd-toolbar-right {
        order: 3;

        flex: 1 1 auto;

        display: flex;

        align-items: center;

        justify-content: flex-end;

        flex-wrap: nowrap;

        gap: 4px;

        min-width: 0;
    }


    .pfd-button {
        min-height: 36px;

        padding-left: 9px;
        padding-right: 9px;
    }


    /*
     * Hide text labels and keep icons on mobile.
     */
    .pfd-button-label {
        display: none;
    }


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

    .pfd-reader,
    .pfd-main {
        min-height: 540px;
    }


    /*
     * Remove side spacing.
     */
    .pfd-main {
        width: 100%;

        max-width: none;

        margin: 0;

        padding: 0;
    }


    /*
     * Full-width book stage.
     */
    .pfd-stage {
        width: 100%;

        max-width: none;

        height: 500px;

        margin: 0;

        padding: 0;

        overflow: hidden;
    }


    .pfd-book {
        width: 100%;

        max-width: 100%;

        margin: 0 auto;
    }


    /*
     * Let StPageFlip control its own internal width.
     * Do not force .stf__parent / .stf__wrapper widths.
     */


    .pfd-page-canvas {
        display: block;

        width: 100%;

        height: 100%;

        object-fit: contain;
    }


    /* =====================================================
       MOBILE NAVIGATION ARROWS
       ===================================================== */

    .pfd-arrow {
        position: absolute;

        top: 50%;

        transform: translateY(-50%);

        z-index: 40;

        width: 42px;

        height: 64px;

        padding: 0;

        margin: 0;

        border: 0;

        border-radius: 0;

        background: rgba(0, 0, 0, 0.35);

        color: #ffffff;

        font-size: 38px;

        line-height: 1;

        display: flex;

        align-items: center;

        justify-content: center;
    }


    .pfd-arrow:hover,
    .pfd-arrow:focus {
        background: rgba(78, 0, 142, 0.85);
    }


    .pfd-prev {
        left: 0;
    }


    .pfd-next {
        right: 0;
    }


    /* =====================================================
       MOBILE THUMBNAIL DRAWER
       ===================================================== */

    .pfd-sidebar {
        width: 300px;

        max-width: 88vw;
    }


    .pfd-sidebar-heading {
        height: 54px;

        padding: 0 14px;
    }


    .pfd-thumbnails {
        height: calc(100% - 54px);

        padding: 14px;
    }


    .pfd-thumbnail {
        padding: 8px;

        margin-bottom: 18px;
    }


    .pfd-thumbnail span {
        font-size: 12px;

        margin-top: 7px;
    }


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

    .pfd-footer {
        min-height: 56px;

        padding: 6px 8px;

        gap: 8px;
    }


    .pfd-footer-button span {
        display: none;
    }


    .pfd-page-counter {
        font-size: 12px;

        gap: 5px;
    }


    .pfd-page-input {
        width: 50px;
    }


    /* =====================================================
       MOBILE ZOOM CONTROLS
       ===================================================== */

    .pfd-zoom-controls {
        gap: 2px;

        flex-shrink: 0;
    }


    .pfd-zoom-controls .pfd-button {
        min-width: 32px;

        padding-left: 7px;
        padding-right: 7px;
    }


    .pfd-zoom-reset {
        min-width: 50px !important;
    }


    .pfd-zoom-level {
        font-size: 11px;
    }


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

    .paine-flipdoc.pfd-mobile-fullscreen
    .pfd-main {
        min-height: 0;

        width: 100%;

        max-width: none;

        margin: 0;

        padding: 0;
    }


    .paine-flipdoc.pfd-mobile-fullscreen
    .pfd-stage {
        width: 100%;

        max-width: none;

        height: auto;

        min-height: 0;

        padding: 0;

        margin: 0;

        max-height: calc(100vh - 112px);
    }


    @supports (height: 100dvh) {

        .paine-flipdoc.pfd-mobile-fullscreen
        .pfd-stage {
            max-height: calc(100dvh - 112px);
        }

    }

}

/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .pfd-main {
        padding: 0;
    }


    .pfd-stage {
        height: 455px;
    }


    .pfd-arrow {
        width: 34px;

        height: 58px;

        font-size: 32px;
    }


    .pfd-page-counter label {
        gap: 4px;
    }


    .pfd-sidebar {
        width: 280px;

        max-width: 90vw;
    }

}


/* =========================================================
   CONFIGURABLE PAGE SHADOWS
   ========================================================= */

.pfd-page {
    background: #fff;
}


/* None */

.paine-flipdoc.pfd-shadow-none
.pfd-page,
.paine-flipdoc.pfd-shadow-none
.stf__item {
    box-shadow: none;
}


/* Subtle */

.paine-flipdoc.pfd-shadow-subtle
.pfd-page,
.paine-flipdoc.pfd-shadow-subtle
.stf__item {
    box-shadow:
        0
        4px
        14px
        rgba(
            0,
            0,
            0,
            0.18
        );
}


/* Realistic */

.paine-flipdoc.pfd-shadow-realistic
.pfd-page,
.paine-flipdoc.pfd-shadow-realistic
.stf__item {
    box-shadow:
        0
        8px
        28px
        rgba(
            0,
            0,
            0,
            0.32
        );
}


/* Strong */

.paine-flipdoc.pfd-shadow-strong
.pfd-page,
.paine-flipdoc.pfd-shadow-strong
.stf__item {
    box-shadow:
        0
        12px
        38px
        rgba(
            0,
            0,
            0,
            0.48
        );
}


/* =========================================================
   CONFIGURABLE VIEWER BACKGROUNDS
   ========================================================= */

.paine-flipdoc.pfd-background-dark
.pfd-main {
    background:
        radial-gradient(
            circle at center,
            #363139 0%,
            #211e24 65%,
            #161418 100%
        );
}


.paine-flipdoc.pfd-background-light
.pfd-main {
    background:
        radial-gradient(
            circle at center,
            #f4f4f4 0%,
            #dedede 70%,
            #cfcfcf 100%
        );
}


.paine-flipdoc.pfd-background-purple
.pfd-main {
    background:
        radial-gradient(
            circle at center,
            #7042a1 0%,
            #4E008E 65%,
            #2c0050 100%
        );
}


.paine-flipdoc.pfd-background-custom
.pfd-main {
    background:
        var(
            --pfd-custom-background,
            #211e24
        );
}

/* =========================================================
   FLIPDOC COLLECTION GRID
   ========================================================= */

.paine-flipdoc-collection-archive-content {
    width: min(1280px, calc(100% - 2rem));

    margin:
        3rem
        auto
        4rem;
}


.paine-flipdoc-collection-archive-description {
    margin-bottom: 2rem;
}


.paine-flipdoc-collection {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(220px, 1fr)
        );

    gap: 28px;

    width: 100%;
}


.paine-flipdoc-collection[style*="--paine-flipdoc-columns"] {
    grid-template-columns:
        repeat(
            var(--paine-flipdoc-columns),
            minmax(0, 1fr)
        );
}


.paine-flipdoc-collection--list {
    display: grid;

    gap: 12px;

    grid-template-columns: 1fr;
}


/* =========================================================
   COLLECTION CARD
   ========================================================= */

.paine-flipdoc-card {
    margin: 0;

    min-width: 0;

    background: #ffffff;

    border-radius: 6px;

    overflow: hidden;

    box-shadow:
        0
        5px
        20px
        rgba(
            0,
            0,
            0,
            0.12
        );

    transition:
        transform 0.36s ease-in-out,
        box-shadow 0.36s ease-in-out;
}


.paine-flipdoc-card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0
        12px
        30px
        rgba(
            0,
            0,
            0,
            0.18
        );
}


.paine-flipdoc-collection--list
.paine-flipdoc-card:hover {
    transform: none;
}


/* =========================================================
   CARD LINK
   ========================================================= */

.paine-flipdoc-card-link {
    display: flex;

    flex-direction: column;

    height: 100%;

    color: inherit;

    text-decoration: none;
}


.paine-flipdoc-collection--list
.paine-flipdoc-card-link {
    align-items: center;

    flex-direction: row;

    gap: 18px;
}


.paine-flipdoc-card-link:hover,
.paine-flipdoc-card-link:focus {
    color: inherit;

    text-decoration: none;
}


.paine-flipdoc-card-link:focus-visible {
    outline:
        3px solid
        var(--pfd-gold, #CDA177);

    outline-offset:
        -3px;
}


/* =========================================================
   CARD IMAGE / PDF PREVIEW AREA
   ========================================================= */

.paine-flipdoc-card-image {
    position: relative;

    width: 100%;

    /*
     * Standard publication / portrait proportion.
     */
    aspect-ratio:
        8.5 / 11;

    overflow: hidden;

    background:
        #e9e9e9;
}


.paine-flipdoc-collection--thumb-small
.paine-flipdoc-card-image {
    aspect-ratio:
        4 / 3;
}


/* =========================================================
   FEATURED IMAGE
   ========================================================= */

.paine-flipdoc-card-image
.paine-flipdoc-card-featured {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;
}


/* =========================================================
   PDF FIRST-PAGE PREVIEW
   ========================================================= */

.paine-flipdoc-card-pdf-preview {
    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        #eceaec;
}


.paine-flipdoc-card-canvas {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0;

    transition:
        opacity 0.25s ease;
}


.paine-flipdoc-card-pdf-preview.pfd-preview-loaded
.paine-flipdoc-card-canvas {
    opacity: 1;
}


/* =========================================================
   PREVIEW LOADING STATE
   ========================================================= */

.paine-flipdoc-card-preview-loading {
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 20px;

    background:
        #eceaec;

    color:
        #555555;

    font-size:
        13px;

    text-align:
        center;
}


.paine-flipdoc-card-preview-spinner {
    display: block;

    width: 30px;

    height: 30px;

    border:
        3px solid
        rgba(
            78,
            0,
            142,
            0.15
        );

    border-top-color:
        #4E008E;

    border-radius:
        50%;

    animation:
        pfd-collection-spin
        0.75s
        linear
        infinite;
}


@keyframes pfd-collection-spin {

    to {
        transform:
            rotate(360deg);
    }

}


/* =========================================================
   PDF PLACEHOLDER
   ========================================================= */

.paine-flipdoc-card-placeholder {
    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #4E008E 0%,
            #33005e 100%
        );

    color:
        #ffffff;
}


.paine-flipdoc-card-placeholder span {
    font-size:
        28px;

    font-weight:
        700;

    letter-spacing:
        0.04em;
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.paine-flipdoc-card-content {
    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 10px;

    padding:
        16px
        18px
        18px;

    background:
        #ffffff;
}


.paine-flipdoc-collection--list
.paine-flipdoc-card-content {
    align-items: center;

    display: grid;

    gap:
        6px
        18px;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    padding:
        16px
        18px;

    width: 100%;
}


.paine-flipdoc-card-title {
    margin: 0;

    padding: 0;

    color:
        #222222;

    font-size:
        18px;

    font-weight:
        700;

    line-height:
        1.3;
}


.paine-flipdoc-card-description {
    margin-top: 0;

    color:
        #555555;

    font-size:
        14px;

    line-height:
        1.5;
}


.paine-flipdoc-card-count {
    margin:
        8px
        0
        0;

    color:
        #666666;

    font-size:
        13px;

    font-weight:
        700;
}


.paine-flipdoc-card-description p {
    margin:
        0
        0
        0.65em;
}


.paine-flipdoc-card-description p:last-child {
    margin-bottom: 0;
}


.paine-flipdoc-card-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-top: 14px;

    padding:
        9px
        13px;

    border-radius: 4px;

    background:
        var(--pfd-purple, #4E008E);

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        700;
}


.paine-flipdoc-collection--grid
.paine-flipdoc-card-button,
.paine-flipdoc-collection-gallery
.paine-flipdoc-card-button {
    align-self: flex-start;

    margin-top: auto;
}


.paine-flipdoc-collection--list
.paine-flipdoc-card-description {
    grid-column: 1 / -1;

    margin-top: 0;
}


.paine-flipdoc-collection--list
.paine-flipdoc-card-button {
    margin-top: 0;
}


/* =========================================================
   TABLET COLLECTION GRID
   ========================================================= */

@media (
    max-width: 900px
) {

    .paine-flipdoc-collection {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            22px;
    }


    .paine-flipdoc-collection[style*="--paine-flipdoc-columns"] {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .paine-flipdoc-collection--list[style*="--paine-flipdoc-columns"] {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   MOBILE COLLECTION GRID
   ========================================================= */

@media (
    max-width: 600px
) {

    .paine-flipdoc-collection {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            14px;
    }


    .paine-flipdoc-card-content {
        padding:
            12px
            12px
            14px;
    }


    .paine-flipdoc-card-title {
        font-size:
            15px;
    }


    .paine-flipdoc-card-description {
        font-size:
            13px;
    }


    .paine-flipdoc-collection--list
    .paine-flipdoc-card-content {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (
    max-width: 380px
) {

    .paine-flipdoc-collection {
        grid-template-columns:
            1fr;
    }


    .paine-flipdoc-collection[style*="--paine-flipdoc-columns"] {
        grid-template-columns:
            1fr;
    }

}

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

.pfd-zoom-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}


.pfd-zoom-controls .pfd-button {
    min-width: 38px;
}


.pfd-zoom-reset {
    min-width: 64px !important;
}


.pfd-zoom-level {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}


.pfd-zoom-controls .pfd-button:disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}


/*
 * Allow the transformed book to be moved
 * around when enlarged.
 */

.pfd-stage {
    overflow: hidden;
    
}

.paine-flipdoc.pfd-zoomed .pfd-stage {
    overflow: auto;
}


/*
 * Transform is applied directly by JS.
 */

.pfd-book {
    transform-origin: center center;
}


/*
 * When zoomed, allow both horizontal
 * and vertical touch movement.
 */

.paine-flipdoc.pfd-zoomed .pfd-stage {
    overflow: auto;
    touch-action: pan-x pan-y;
}


/*
 * Keep normal document vertical scrolling
 * behavior when not zoomed.
 */

.paine-flipdoc:not(.pfd-zoomed) .pfd-stage {
    touch-action: pan-y;
}




/* =========================================================
   FLIPDOC READING PROGRESS
   ========================================================= */

.pfd-progress {
    width: 100%;
    height: 5px;

    background:
        rgba(
            255,
            255,
            255,
            0.12
        );

    overflow: hidden;

    position: relative;

    z-index: 50;
}


.pfd-progress-bar {
    width: 0;
    height: 100%;

    background:
        var(
            --pfd-gold,
            #CDA177
        );

    transition:
        width 0.3s ease;
}

/* =========================================================
   FLIPDOC BROWSER FALLBACK
   =========================================================
   
   The fallback is visible by default.
   
   This is intentional:
   
   - JavaScript disabled       -> fallback remains
   - JavaScript cannot parse   -> fallback remains
   - unsupported browser       -> fallback remains
   - viewer crashes            -> fallback returns
   - modern working browser    -> JS hides fallback
   ========================================================= */

.pfd-browser-fallback {
    position: absolute;

    inset: 0;

    z-index: 1000;

    width: 100%;
    height: 100%;

    min-height: 320px;

    display: flex;

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

    padding: 40px 24px;

    box-sizing: border-box;

    background:
        radial-gradient(
            circle at center,
            #363139 0%,
            #211e24 65%,
            #161418 100%
        );

    color: #ffffff;

    text-align: center;
}


/*
 * Once modern JS successfully begins initialization,
 * hide the fallback.
 */
.paine-flipdoc.pfd-js-active
.pfd-browser-fallback {
    display: none;
}


/*
 * Restore fallback when initialization fails.
 */
.paine-flipdoc.pfd-fallback-active
.pfd-browser-fallback {
    display: flex;
}


/* =========================================================
   FALLBACK CONTENT
   ========================================================= */

.pfd-browser-fallback-inner {
    width: 100%;

    max-width: 620px;

    margin: 0 auto;

    padding: 36px 30px;

    box-sizing: border-box;

    background:
        rgba(
            0,
            0,
            0,
            0.22
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    border-radius: 6px;

    box-shadow:
        0
        15px
        45px
        rgba(
            0,
            0,
            0,
            0.28
        );
}


/* =========================================================
   FALLBACK TITLE
   ========================================================= */

.pfd-browser-fallback-title {
    margin:
        0
        0
        14px;

    padding: 0;

    color: #ffffff;

    font-size: 24px;

    font-weight: 700;

    line-height: 1.25;
}


/* =========================================================
   FALLBACK MESSAGE
   ========================================================= */

.pfd-browser-fallback-message {
    max-width: 520px;

    margin:
        0
        auto
        24px;

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );

    font-size: 15px;

    line-height: 1.55;
}


/* =========================================================
   OPEN PDF BUTTON
   ========================================================= */

.pfd-browser-fallback-link {
    display: inline-flex;

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

    min-height: 44px;

    padding:
        0
        22px;

    box-sizing: border-box;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.18
        );

    border-radius: 4px;

    background:
        var(
            --pfd-purple,
            #4E008E
        );

    color: #ffffff;

    text-decoration: none;

    font-weight: 700;

    line-height: 1;

    cursor: pointer;
}


.pfd-browser-fallback-link:hover,
.pfd-browser-fallback-link:focus {
    background: #6200b2;

    color: #ffffff;

    text-decoration: none;
}


.pfd-browser-fallback-link:focus-visible {
    outline:
        2px solid
        var(
            --pfd-gold,
            #CDA177
        );

    outline-offset: 3px;
}


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

@media (max-width: 600px) {

    .pfd-browser-fallback {
        min-height: 420px;

        padding: 20px 16px;
    }


    .pfd-browser-fallback-inner {
        padding: 28px 20px;
    }


    .pfd-browser-fallback-title {
        font-size: 20px;
    }


    .pfd-browser-fallback-message {
        font-size: 14px;

        line-height: 1.5;
    }


    .pfd-browser-fallback-link {
        width: 100%;

        max-width: 280px;

        min-height: 46px;
    }

}

/* =========================================================
   FLIPDOC TOOLBAR LEFT
   ========================================================= */

.pfd-toolbar-left {
    display: flex;
    align-items: center;

    gap: 8px;

    min-width: 0;
}


/* =========================================================
   FLIPDOC TOOLBAR LOGO
   ========================================================= */

.pfd-toolbar-logo {
    display: inline-flex;

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

    flex: 0 0 auto;

    width: clamp(50px, 2.6vw, 60px);
    height: clamp(50px, 2.6vw, 60px);

    margin: 0;

    line-height: 0;

    text-decoration: none;
}


.pfd-toolbar-logo img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    object-position: center;
}


/* =========================================================
   PAGES BUTTON
   ========================================================= */

.pfd-toolbar-left
.pfd-thumbnails-toggle {
    flex: 0 0 auto;

    margin: 0;
}


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

@media (max-width: 600px) {

    .pfd-toolbar-left {
        gap: 6px;
    }


    .pfd-toolbar-logo {
        width: clamp(26px, 7vw, 32px);
        height: clamp(26px, 7vw, 32px);
    }

}