.pfmqf-instance{
    position:relative;
    display:block;
    box-sizing:border-box;
    margin:24px auto;
    max-width:100%;
    font-family:Arial,sans-serif;
    clear:both;
}
.pfmqf-instance*,.pfmqf-instance*::before,.pfmqf-instance*::after{box-sizing:border-box}
.pfmqf-toolbar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin:0 0 10px;
    justify-content:center;
    z-index:10;
}

/*
 * .pfmqf-btn: higher specificity selector to override theme anchor/button resets
 * without resorting to !important. Works for both <button> and <a> elements.
 * display:inline-flex, color and text-decoration are the three properties themes
 * most commonly override; a double-class selector (specificity 0,2,0) beats any
 * single-class or element rule a theme can produce (0,1,0 or 0,0,1).
 */
.pfmqf-instance .pfmqf-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:7px 12px;
    border:1px solid rgba(0,0,0,.15);
    border-radius:8px;
    background:#fff;
    color:#222;
    text-decoration:none;
    font-size:14px;
    line-height:1;
    cursor:pointer;
    transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
    appearance:none;
    -webkit-appearance:none;
}
.pfmqf-instance .pfmqf-btn:hover,
.pfmqf-instance .pfmqf-btn:focus{
    background:#f5f5f5;
    transform:translateY(-1px);
    box-shadow:0 3px 10px rgba(0,0,0,.08);
    outline:none;
}
.pfmqf-prev,.pfmqf-next{min-width:42px;font-size:28px;line-height:1}
.pfmqf-counter{min-width:130px;text-align:center;font-size:14px;color:#333}
.pfmqf-stage{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    width:100%;
    height:auto;
    min-height:260px;
    margin:0 auto;
    padding:12px;
    border-radius:14px;
    background:radial-gradient(circle at center,rgba(255,255,255,.95),rgba(230,230,230,.9)),linear-gradient(135deg,#f8f8f8,#e8e8e8);
    box-shadow:0 15px 45px rgba(0,0,0,.16);
    touch-action:pan-y;
}

/*
 * .pfmqf-book: position:relative and centering margins must survive any theme
 * reset that sets position:static or margin:0 on generic block elements.
 * Using .pfmqf-stage .pfmqf-book (specificity 0,2,0) avoids !important while
 * still winning against a theme's single-class or element selectors.
 */
.pfmqf-stage .pfmqf-book{
    position:relative;
    display:block;
    width:auto;
    height:auto;
    margin:0 auto;
    outline:none;
    overflow:visible;
}
.pfmqf-book .page{background:#fff;overflow:hidden}
.pfmqf-page-img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    background:#fff;
    user-select:none;
    -webkit-user-drag:none;
    pointer-events:none;
}

/*
 * Hide the raw page divs that are in the DOM before StPageFlip picks them up.
 * Direct-child selector avoids hiding canvas/img elements injected by StPageFlip.
 */
.pfmqf-stage .pfmqf-book > .pfmqf-page{display:none}

/* StPageFlip internal wrappers — centred inside the stage without !important */
.pfmqf-book .stf__parent,
.pfmqf-stage .stf__parent,
.pfmqf-book .stf__wrapper,
.pfmqf-stage .stf__wrapper{
    margin-left:auto;
    margin-right:auto;
}

.pfmqf-loader{
    position:absolute;
    inset:0;
    z-index:20;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(4px);
    color:#222;
    font-size:14px;
    text-align:center;
    padding:20px;
}
.pfmqf-loader.is-hidden{display:none}
.pfmqf-spinner{
    width:38px;
    height:38px;
    border:4px solid rgba(0,0,0,.12);
    border-top-color:rgba(0,0,0,.65);
    border-radius:50%;
    animation:pfmqfSpin .8s linear infinite;
}
@keyframes pfmqfSpin{to{transform:rotate(360deg)}}

/* Loader progress bar — shows download/render percentage */
.pfmqf-loader-progress{
    width:min(280px,80%);
    height:6px;
    background:rgba(0,0,0,.10);
    border-radius:999px;
    overflow:hidden;
    margin-top:4px;
}
.pfmqf-loader-bar{
    height:100%;
    width:0%;
    background:linear-gradient(90deg,#2271b1,#5c9eff);
    border-radius:999px;
    transition:width .25s ease-out;
}
.pfmqf-loader-percent{
    font-size:13px;
    font-weight:600;
    color:#444;
    min-height:18px;
    font-variant-numeric:tabular-nums;
}

.pfmqf-progress-wrap{margin-top:10px}
.pfmqf-progress{width:100%;cursor:pointer}
.pfmqf-error{
    padding:14px 16px;
    border-left:4px solid #cc1818;
    background:#fff2f2;
    color:#8a1111;
    font-size:14px;
}

/*
 * Fullscreen: width/max-width must override the inline style set by PHP on the
 * instance element (e.g. style="width:800px"). Inline styles win at specificity
 * 1,0,0, so !important is the only correct tool here — this is intentional and
 * isolated to the two properties that actually conflict with the inline value.
 */
.pfmqf-instance.is-fullscreen{
    position:fixed;
    inset:0;
    z-index:999999;
    width:100% !important;
    max-width:none !important;
    height:100vh;
    padding:16px;
    margin:0;
    background:#f1f1f1;
    overflow:auto;
}

.pfmqf-password-box{
    position:absolute;
    inset:0;
    z-index:30;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(5px);
}
.pfmqf-password-box[hidden]{display:none}
.pfmqf-password-card{
    width:min(380px,100%);
    padding:24px;
    border-radius:16px;
    background:#fff;
    box-shadow:0 15px 40px rgba(0,0,0,.18);
    text-align:center;
}
.pfmqf-password-title{margin-bottom:8px;font-size:18px;font-weight:700;color:#111}
.pfmqf-password-message{margin-bottom:16px;font-size:14px;color:#555}
.pfmqf-password-input{
    width:100%;
    min-height:42px;
    margin-bottom:12px;
    padding:8px 12px;
    border:1px solid rgba(0,0,0,.18);
    border-radius:8px;
    font-size:15px;
}
.pfmqf-password-input:focus{border-color:rgba(0,0,0,.45);outline:none}
.pfmqf-password-submit{width:100%}
.pfmqf-password-error{margin-top:12px;color:#b00020;font-size:13px}
@media(max-width:768px){
    .pfmqf-toolbar{justify-content:center}
    .pfmqf-instance .pfmqf-btn{min-height:34px;padding:6px 10px;font-size:13px}
    .pfmqf-layout{display:none}
    .pfmqf-stage{min-height:320px;padding:8px}
}

/* Toolbar icon buttons (layout toggle, fullscreen toggle and download) */
.pfmqf-btn .pfmqf-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:0;
}
.pfmqf-btn .pfmqf-icon svg{display:block}

/* Layout icon: show "two pages" by default, "one page" when in single mode */
.pfmqf-instance .pfmqf-icon-layout-single{display:none}
.pfmqf-instance.is-single .pfmqf-icon-layout-double{display:none}
.pfmqf-instance.is-single .pfmqf-icon-layout-single{display:inline-flex}

/* Fullscreen icon: show "enter" by default, "exit" when in fullscreen */
.pfmqf-instance .pfmqf-icon-exit-fs{display:none}
.pfmqf-instance.is-fullscreen .pfmqf-icon-enter-fs{display:none}
.pfmqf-instance.is-fullscreen .pfmqf-icon-exit-fs{display:inline-flex}

/* Make icon-only buttons square so the icons look balanced */
.pfmqf-btn.pfmqf-layout,
.pfmqf-btn.pfmqf-fullscreen,
.pfmqf-btn.pfmqf-download{
    min-width:38px;
    padding:6px 10px;
}