/* ============================================================
   O7 FlipBook — viewer.css v2.3
   Full CSS-variable theming: all colors derived from 4 user vars.
   Modern glassmorphism UI for toolbar/controls.
   Nav arrows always visible regardless of page background.
   ============================================================ */

/* ── Box sizing ─────────────────────────────────────────────── */
.pdfmag-wrapper *, .pdfmag-wrapper *::before, .pdfmag-wrapper *::after {
    box-sizing: border-box;
}

/* ══ CSS VARS ═════════════════════════════════════════════════
   --pm-bg, --pm-toolbar, --pm-accent, --pm-text are user-set
   via inline style on the wrapper #id element.
   All other vars are derived from these four.
══════════════════════════════════════════════════════════════ */
.pdfmag-wrapper {
    --pm-bg:         #1e2233;
    --pm-toolbar:    #0f121e;
    --pm-accent:     #e84545;
    --pm-text:       #e8eaf0;

    /* Derived opacity levels of --pm-text */
    --pm-text-55:    color-mix(in srgb, var(--pm-text) 55%, transparent);
    --pm-text-35:    color-mix(in srgb, var(--pm-text) 35%, transparent);
    --pm-text-15:    color-mix(in srgb, var(--pm-text) 15%, transparent);
    --pm-text-10:    color-mix(in srgb, var(--pm-text) 10%, transparent);
    --pm-text-07:    color-mix(in srgb, var(--pm-text) 7%, transparent);

    --pm-font:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --pm-tab-h:   26px;
}

/* Fallback for older Safari / Firefox without color-mix */
@supports not (color: color-mix(in srgb, red, blue)) {
    .pdfmag-wrapper {
        --pm-text-55: rgba(232,234,240,.55);
        --pm-text-35: rgba(232,234,240,.35);
        --pm-text-15: rgba(232,234,240,.15);
        --pm-text-10: rgba(232,234,240,.10);
        --pm-text-07: rgba(232,234,240,.07);
    }
}

/* ══ WRAPPER ══════════════════════════════════════════════════ */
.pdfmag-wrapper {
    display:         flex !important;
    flex-direction:  column !important;
    font-family:     var(--pm-font);
    background:      var(--pm-bg);
    overflow:        hidden !important;
    position:        relative;
    color:           var(--pm-text);
    user-select:     none;
}

/* ══ FULLSCREEN ═══════════════════════════════════════════════ */
.pdfmag-wrapper:fullscreen,
.pdfmag-wrapper:-webkit-full-screen,
.pdfmag-wrapper:-moz-full-screen {
    width:         100vw !important;
    height:        100vh !important;
    max-width:     none  !important;
    border-radius: 0     !important;
}

/* ══ STEALTH MODE ═════════════════════════════════════════════ */
.pdfmag-wrapper.pdfmag-stealth .pdfmag-toolbar,
.pdfmag-wrapper.pdfmag-stealth .pdfmag-controls {
    opacity: 0; pointer-events: none; transition: opacity .3s;
}
.pdfmag-wrapper.pdfmag-stealth:hover .pdfmag-toolbar,
.pdfmag-wrapper.pdfmag-stealth:hover .pdfmag-controls {
    opacity: 1; pointer-events: auto;
}
.pdfmag-wrapper.pdfmag-stealth .pdfmag-toolbar {
    background: linear-gradient(to bottom,rgba(0,0,0,.65) 0%,transparent 100%);
    border-bottom: none; position: absolute; top:0; left:0; right:0; z-index:30;
}
.pdfmag-wrapper.pdfmag-stealth .pdfmag-controls {
    background: linear-gradient(to top,rgba(0,0,0,.65) 0%,transparent 100%);
    border-top: none; position: absolute; bottom:0; left:0; right:0; z-index:30;
}
.pdfmag-wrapper.pdfmag-stealth .pdfmag-viewer-area { flex: 1 !important; }

/* ══ NORMAL MODE (non-light, non-stealth): hover reveal toolbar ═
   Toolbar slides in from top on hover; controls from bottom.
══════════════════════════════════════════════════════════════ */
.pdfmag-wrapper:not(.pdfmag-light):not(.pdfmag-stealth) .pdfmag-toolbar {
    transform:  translateY(-100%);
    opacity:    0;
    transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .25s;
    position:   relative;
    z-index:    30;
}
.pdfmag-wrapper:not(.pdfmag-light):not(.pdfmag-stealth):hover .pdfmag-toolbar {
    transform: translateY(0);
    opacity:   1;
}
.pdfmag-wrapper:not(.pdfmag-light):not(.pdfmag-stealth) .pdfmag-controls {
    transform:  translateY(100%);
    opacity:    0;
    transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .25s;
    position:   relative;
    z-index:    30;
}
.pdfmag-wrapper:not(.pdfmag-light):not(.pdfmag-stealth):hover .pdfmag-controls {
    transform: translateY(0);
    opacity:   1;
}
/* Viewer area takes full height when bars are hidden */
.pdfmag-wrapper:not(.pdfmag-light):not(.pdfmag-stealth) .pdfmag-viewer-area {
    flex: 1 !important;
    margin-top:    -50px; /* overlap hidden toolbar space */
    margin-bottom: -44px; /* overlap hidden controls space */
    transition: margin .25s cubic-bezier(.4,0,.2,1);
}
.pdfmag-wrapper:not(.pdfmag-light):not(.pdfmag-stealth):hover .pdfmag-viewer-area {
    margin-top:    0;
    margin-bottom: 0;
}

/* ══ LIGHT TEMPLATE ═══════════════════════════════════════════ */
.pdfmag-wrapper.pdfmag-light {
    background: transparent !important;
    border-radius: 0 !important;
}
.pdfmag-wrapper.pdfmag-light .pdfmag-view-flipbook,
.pdfmag-wrapper.pdfmag-light .pdfmag-view-carousel,
.pdfmag-wrapper.pdfmag-light .pdfmag-view-grid,
.pdfmag-wrapper.pdfmag-light .pdfmag-viewer-area,
.pdfmag-wrapper.pdfmag-light .pdfmag-loading {
    background: transparent !important;
}

/* ── Light Drawer: toolbar (top) ─────────────────────────────
   Tab bar: accent-colored pill floating above the viewer.
   When open: slides down to show full toolbar content.
══════════════════════════════════════════════════════════════ */
.pdfmag-wrapper.pdfmag-light .pdfmag-toolbar.pdfmag-drawer {
    position:    relative;
    height:      var(--pm-tab-h);
    min-height:  var(--pm-tab-h);
    max-height:  var(--pm-tab-h);
    overflow:    hidden;
    /* Accent-tinted glass bar */
    background:  linear-gradient(135deg,
                    color-mix(in srgb, var(--pm-accent) 90%, #000) 0%,
                    color-mix(in srgb, var(--pm-accent) 70%, #000) 100%);
    border:      none;
    border-bottom: 1px solid color-mix(in srgb, var(--pm-accent) 50%, transparent);
    box-shadow:  0 2px 12px rgba(0,0,0,.25);
    transition:  height .3s cubic-bezier(.4,0,.2,1), max-height .3s cubic-bezier(.4,0,.2,1),
                 background .3s, box-shadow .3s;
    flex-shrink: 0;
    z-index:     40;
}
/* Toolbar tab: closed = accent bg (always contrasts), text always white */
.pdfmag-wrapper.pdfmag-light .pdfmag-toolbar.pdfmag-drawer .pdfmag-drawer-tab {
    color:      #fff;
    background: transparent; /* inherits accent gradient from parent */
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.pdfmag-wrapper.pdfmag-light .pdfmag-toolbar.pdfmag-drawer .pdfmag-drawer-tab:hover {
    color:       #fff;
    background:  rgba(0,0,0,.12);
}
/* When open: tab sits on toolbar bg — use text color */
.pdfmag-wrapper.pdfmag-light .pdfmag-toolbar.pdfmag-drawer.pdfmag-open .pdfmag-drawer-tab {
    color:      var(--pm-text);
    text-shadow: none;
}
.pdfmag-wrapper.pdfmag-light .pdfmag-toolbar.pdfmag-drawer.pdfmag-open .pdfmag-drawer-tab:hover {
    color:      var(--pm-text);
    background: var(--pm-text-07);
}

/* When OPEN: switch to toolbar color with proper height */
.pdfmag-wrapper.pdfmag-light .pdfmag-toolbar.pdfmag-drawer.pdfmag-open {
    max-height:  none;
    height:      calc(50px + var(--pm-tab-h)) !important;
    background:  var(--pm-toolbar);
    box-shadow:  0 4px 20px rgba(0,0,0,.35);
    border-bottom-color: var(--pm-text-10);
}
/* When toolbar drawer is open: use theme text color (not hardcoded white) */
.pdfmag-wrapper.pdfmag-light .pdfmag-toolbar.pdfmag-drawer.pdfmag-open .pdfmag-tool-btn,
.pdfmag-wrapper.pdfmag-light .pdfmag-toolbar.pdfmag-drawer.pdfmag-open .pdfmag-zoom-pct,
.pdfmag-wrapper.pdfmag-light .pdfmag-toolbar.pdfmag-drawer.pdfmag-open .pdfmag-title {
    color: var(--pm-text) !important;
    opacity: 0.85;
}
.pdfmag-wrapper.pdfmag-light .pdfmag-toolbar.pdfmag-drawer.pdfmag-open .pdfmag-tool-btn:hover {
    color:      var(--pm-text) !important;
    background: var(--pm-text-07) !important;
    opacity: 1;
}

/* ── Light Drawer: controls (bottom) — always visible ────────
══════════════════════════════════════════════════════════════ */
.pdfmag-wrapper.pdfmag-light .pdfmag-controls.pdfmag-drawer {
    position:    relative;
    height:      44px;
    min-height:  44px;
    overflow:    visible;
    background:  linear-gradient(135deg,
                    color-mix(in srgb, var(--pm-accent) 90%, #000) 0%,
                    color-mix(in srgb, var(--pm-accent) 70%, #000) 100%);
    border:      none;
    border-top:  1px solid color-mix(in srgb, var(--pm-accent) 50%, transparent);
    box-shadow:  0 -2px 12px rgba(0,0,0,.25);
    flex-shrink: 0;
    z-index:     40;
}
/* Controls buttons always white on accent bg */
.pdfmag-wrapper.pdfmag-light .pdfmag-controls.pdfmag-drawer .pdfmag-ctrl-btn,
.pdfmag-wrapper.pdfmag-light .pdfmag-controls.pdfmag-drawer .pdfmag-controls-center,
.pdfmag-wrapper.pdfmag-light .pdfmag-controls.pdfmag-drawer .pdfmag-thumbs-toggle {
    color: rgba(255,255,255,.85) !important;
}
.pdfmag-wrapper.pdfmag-light .pdfmag-controls.pdfmag-drawer .pdfmag-ctrl-btn:hover,
.pdfmag-wrapper.pdfmag-light .pdfmag-controls.pdfmag-drawer .pdfmag-thumbs-toggle:hover {
    color:      #fff !important;
    background: rgba(255,255,255,.15) !important;
    opacity: 1;
}
.pdfmag-wrapper.pdfmag-light .pdfmag-controls.pdfmag-drawer .pdfmag-page-input {
    background:   rgba(255,255,255,.15) !important;
    border-color: rgba(255,255,255,.25) !important;
    color:        #fff !important;
}
.pdfmag-wrapper.pdfmag-light .pdfmag-controls.pdfmag-drawer .pdfmag-thumbs-toggle {
    background:   rgba(255,255,255,.15) !important;
    border-color: rgba(255,255,255,.2) !important;
}

/* Remove old "open" state rules — controls are always shown */

/* ── Light mode: tool/ctrl buttons use white (always on dark bg) */
.pdfmag-wrapper.pdfmag-light .pdfmag-tool-btn,
.pdfmag-wrapper.pdfmag-light .pdfmag-ctrl-btn {
    color: rgba(255,255,255,.65);
}
.pdfmag-wrapper.pdfmag-light .pdfmag-tool-btn:hover,
.pdfmag-wrapper.pdfmag-light .pdfmag-ctrl-btn:hover {
    color: #fff;
    background: rgba(255,255,255,.12);
}
.pdfmag-wrapper.pdfmag-light .pdfmag-title,
.pdfmag-wrapper.pdfmag-light .pdfmag-zoom-pct,
.pdfmag-wrapper.pdfmag-light .pdfmag-controls-center {
    color: rgba(255,255,255,.55) !important;
}
.pdfmag-wrapper.pdfmag-light .pdfmag-toolbar-divider { background: rgba(255,255,255,.15); }
.pdfmag-wrapper.pdfmag-light .pdfmag-thumbs-toggle {
    background:   rgba(255,255,255,.1) !important;
    border-color: rgba(255,255,255,.15) !important;
    color:        rgba(255,255,255,.65) !important;
}
.pdfmag-wrapper.pdfmag-light .pdfmag-thumbs-toggle:hover {
    background: rgba(255,255,255,.2) !important;
    color:      #fff !important;
}
.pdfmag-wrapper.pdfmag-light .pdfmag-page-input {
    background:   rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.18) !important;
    color:        #fff !important;
}

/* ── Light mode nav buttons: always visible dark backdrop ──── */
.pdfmag-wrapper.pdfmag-light .pdfmag-nav-btn {
    background:   rgba(0,0,0,.5) !important;
    border-color: rgba(255,255,255,.2) !important;
    color:        #fff !important;
    opacity:      0.75;
}
.pdfmag-wrapper.pdfmag-light .pdfmag-nav-btn:hover {
    background:   var(--pm-accent) !important;
    border-color: transparent !important;
    opacity:      1;
}

/* ── Thumbs strip in light mode ──────────────────────────── */
.pdfmag-wrapper.pdfmag-light .pdfmag-thumbs-strip {
    background: rgba(0,0,0,.55) !important;
    backdrop-filter: blur(8px);
}

/* ══ DRAWER TAB ═══════════════════════════════════════════════ */
.pdfmag-drawer-tab {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          var(--pm-tab-h);
    background:      none;
    border:          none;
    color:           var(--pm-text-35);
    font-size:       9px;
    cursor:          pointer;
    gap:             6px;
    letter-spacing:  0.09em;
    text-transform:  uppercase;
    font-weight:     700;
    transition:      color .15s, background .15s;
    outline:         none;
    padding:         0;
    flex-shrink:     0;
}
.pdfmag-drawer-tab:hover {
    color:       var(--pm-text);
    background:  var(--pm-text-07);
}
.pdfmag-drawer-arrow {
    display: none; /* Arrows removed - label text only */
}

.pdfmag-toolbar-toggle::after  { content: attr(data-label); font-family: var(--pm-font); }
.pdfmag-controls-toggle::after { content: attr(data-label); font-family: var(--pm-font); }

.pdfmag-toolbar-inner, .pdfmag-controls-inner { display: flex; width: 100%; }
.pdfmag-toolbar.pdfmag-drawer   { flex-direction: column; }
.pdfmag-controls.pdfmag-drawer  { flex-direction: column-reverse; }
.pdfmag-controls.pdfmag-drawer .pdfmag-drawer-tab    { order: 2; }
.pdfmag-controls.pdfmag-drawer .pdfmag-controls-inner { order: 1; }

/* ══ TOOLBAR ══════════════════════════════════════════════════ */
.pdfmag-toolbar {
    display:         flex !important;
    align-items:     center;
    justify-content: space-between;
    padding:         0 14px;
    height:          50px;
    background:      var(--pm-toolbar);
    border-bottom:   1px solid var(--pm-text-10);
    flex-shrink:     0;
    gap:             8px;
}
.pdfmag-toolbar.pdfmag-drawer { padding: 0; height: auto; }
.pdfmag-toolbar-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0 14px;
    height:          50px;
    gap:             8px;
    flex:            1;
    width:           100%;
}
.pdfmag-toolbar-left  { display:flex; align-items:center; gap:8px; min-width:0; flex:1; }
.pdfmag-toolbar-right { display:flex; align-items:center; gap:2px; flex-shrink:0; }

/* Title */
.pdfmag-title {
    font-size:      12px;
    font-weight:    700;
    color:          var(--pm-text-55);
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    max-width:      240px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Toolbar divider */
.pdfmag-toolbar-divider {
    width:       1px;
    height:      18px;
    background:  var(--pm-text-15);
    flex-shrink: 0;
    margin:      0 4px;
}

/* Zoom percent label */
.pdfmag-zoom-pct {
    font-size:    10px;
    font-weight:  700;
    color:        var(--pm-text-35);
    min-width:    32px;
    text-align:   center;
    letter-spacing: 0.06em;
}

/* ── Tool buttons ─────────────────────────────────────────── */
.pdfmag-tool-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           30px;
    height:          30px;
    background:      transparent;
    border:          none;
    border-radius:   7px;
    color:           var(--pm-text-35);
    cursor:          pointer;
    font-size:       12px;
    font-weight:     700;
    transition:      background .14s, color .14s, transform .1s;
    padding:         0;
}
.pdfmag-tool-btn:hover {
    background: var(--pm-text-10);
    color:      var(--pm-text);
    transform:  scale(1.1);
}
.pdfmag-tool-btn:active { transform: scale(0.93); }
.pdfmag-tool-btn.active {
    background:  var(--pm-accent);
    color:       #fff;
    box-shadow:  0 0 10px rgba(0,0,0,.3);
}

/* ══ VIEWER AREA ══════════════════════════════════════════════ */
.pdfmag-viewer-area {
    flex:       1 1 0%;
    min-height: 0;
    min-width:  0;
    position:   relative;
    overflow:   hidden;
    background: var(--pm-bg);
    display:    flex;
}

/* ══ VIEWS ════════════════════════════════════════════════════ */
.pdfmag-view {
    position: absolute; inset: 0;
    display:  none; align-items: center; justify-content: center;
    overflow: hidden;
}
.pdfmag-view.active { display: flex; }

/* ══ LOADING ══════════════════════════════════════════════════ */
.pdfmag-loading {
    position:       absolute; inset: 0; z-index: 20;
    display:        flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 14px;
    background:     var(--pm-bg);
}
.pdfmag-loading.hidden { display: none; }
.pdfmag-spinner {
    width: 40px; height: 40px;
    border: 3px solid var(--pm-text-10);
    border-top-color: var(--pm-accent);
    border-radius: 50%;
    animation: pm-spin .8s linear infinite;
}
@keyframes pm-spin { to { transform: rotate(360deg); } }
.pdfmag-loading-text  { text-align: center; }
.pdfmag-progress-msg  { font-size: 13px; color: var(--pm-text); font-weight: 600; margin-bottom: 8px; }
.pdfmag-progress-bar  { width: 160px; height: 4px; background: var(--pm-text-10); border-radius: 2px; overflow: hidden; }
.pdfmag-progress-fill { height: 100%; background: var(--pm-accent); border-radius: 2px; width: 0; transition: width .3s; }
.pdfmag-progress-pct  { font-size: 12px; color: var(--pm-text); font-weight: 600; margin-top: 6px; display: block; opacity: 0.75; }

/* ══ FLIPBOOK NAV ARROWS ══════════════════════════════════════
   Uses --pm-toolbar bg so always visible on any page color.
   box-shadow adds depth regardless of bg brightness.
══════════════════════════════════════════════════════════════ */
.pdfmag-view-flipbook { background: var(--pm-bg); }

/* ── Magazine cover view ─────────────────────────────────────────
   On the front cover (and lone back page) the empty half of the book
   is clipped away and the container slides 25% so the visible page
   sits centered — like holding a closed magazine. */
.pdfmag-flipbook-container {
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.pdfmag-cover-view .pdfmag-flipbook-container { transform: translateX(-25%); }
.pdfmag-cover-view .pdfmag-flipbook-container canvas { clip-path: inset(0 0 0 50%); }
.pdfmag-back-view  .pdfmag-flipbook-container { transform: translateX(25%); }
.pdfmag-back-view  .pdfmag-flipbook-container canvas { clip-path: inset(0 50% 0 0); }
.pdfmag-nav-btn {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    z-index:         10;
    background:      var(--pm-toolbar);
    border:          1px solid var(--pm-text-15);
    box-shadow:      0 2px 16px rgba(0,0,0,.4), inset 0 1px 0 var(--pm-text-07);
    color:           var(--pm-text-55);
    font-size:       16px;
    line-height:     1;
    width:           34px;
    height:          68px;
    padding:         0;
    cursor:          pointer;
    border-radius:   8px;
    transition:      background .18s, color .18s, opacity .18s, transform .12s, box-shadow .18s;
    display:         flex;
    align-items:     center;
    justify-content: center;
    opacity:         0.9;
}
.pdfmag-nav-btn:hover {
    opacity:      1;
    background:   var(--pm-accent);
    color:        #fff;
    border-color: transparent;
    box-shadow:   0 4px 24px rgba(0,0,0,.45);
    transform:    translateY(-50%) scale(1.04);
}
.pdfmag-nav-btn:active { transform: translateY(-50%) scale(0.93); }
.pdfmag-nav-prev { left: 10px; }
.pdfmag-nav-next { right: 10px; }
.pdfmag-nav-btn.hidden { opacity: 0; pointer-events: none; }

/* ══ CONTROLS ═════════════════════════════════════════════════ */
.pdfmag-controls {
    display:         flex !important;
    align-items:     center;
    justify-content: space-between;
    padding:         0 12px;
    height:          44px;
    background:      var(--pm-toolbar);
    border-top:      1px solid var(--pm-text-10);
    flex-shrink:     0;
    gap:             6px;
}
.pdfmag-controls.pdfmag-drawer { padding: 0; height: auto; }
.pdfmag-controls-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0 12px;
    height:          44px;
    gap:             6px;
    flex:            1;
    width:           100%;
}
.pdfmag-controls-left,
.pdfmag-controls-right { display: flex; align-items: center; gap: 1px; }
.pdfmag-controls-center {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   11px;
    font-weight: 600;
    color:       var(--pm-text-35);
    letter-spacing: 0.03em;
}

/* Control prev/next/first/last buttons */
.pdfmag-ctrl-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      transparent;
    border:          none;
    border-radius:   6px;
    color:           var(--pm-text-35);
    font-size:       13px;
    min-width:       28px;
    height:          28px;
    padding:         0 4px;
    cursor:          pointer;
    transition:      background .14s, color .14s, transform .1s;
    font-family:     var(--pm-font);
}
.pdfmag-ctrl-btn:hover {
    background: var(--pm-text-10);
    color:      var(--pm-text);
}
.pdfmag-ctrl-btn:active { transform: scale(0.9); }

/* Thumbnails toggle */
.pdfmag-thumbs-toggle {
    background:     var(--pm-text-07) !important;
    border:         1px solid var(--pm-text-10) !important;
    border-radius:  7px !important;
    padding:        0 9px !important;
    font-size:      10px !important;
    font-weight:    700 !important;
    color:          var(--pm-text-35) !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    gap:            5px !important;
    height:         26px !important;
}
.pdfmag-thumbs-toggle:hover {
    background: var(--pm-text-15) !important;
    color:      var(--pm-text) !important;
}

/* Thumbs toggle arrow - hidden, label text is enough */
.pdfmag-thumbs-arrow {
    display: none;
}

/* Page separator "/ N" — keep on one line, vertically centered */
.pdfmag-wrapper .pdfmag-page-sep {
    display:      inline-flex !important;
    align-items:  center;
    gap:          3px;
    white-space:  nowrap !important;
    line-height:  1;
}

/* Page input — force layout props with !important so host-theme
   input[type=number] rules (higher specificity) can't widen or pad it. */
.pdfmag-wrapper .pdfmag-page-input {
    width:          38px !important;
    min-width:      0 !important;
    max-width:      38px !important;
    box-sizing:     border-box !important;
    height:         26px !important;
    margin:         0 !important;
    padding:        0 4px !important;
    text-align:     center;
    background:     var(--pm-text-07);
    border:         1px solid var(--pm-text-15);
    border-radius:  5px;
    color:          var(--pm-text);
    font-size:      11px;
    font-weight:    700;
    line-height:    24px;
    transition:     border-color .15s, background .15s;
    -moz-appearance: textfield;
}
.pdfmag-page-input:focus {
    outline:      none;
    background:   var(--pm-text-10);
    border-color: var(--pm-accent);
}
.pdfmag-page-input::-webkit-inner-spin-button,
.pdfmag-page-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Go button */
.pdfmag-goto-btn {
    background:     var(--pm-accent);
    border:         none;
    border-radius:  5px;
    color:          #fff;
    font-size:      10px;
    font-weight:    800;
    padding:        0 9px;
    height:         26px;
    cursor:         pointer;
    transition:     opacity .15s, transform .1s;
    font-family:    var(--pm-font);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.pdfmag-goto-btn:hover  { opacity: .82; }
.pdfmag-goto-btn:active { transform: scale(0.94); }

/* ══ CAROUSEL ═════════════════════════════════════════════════ */
.pdfmag-view-carousel { background: var(--pm-bg); }
.pdfmag-view-carousel.active {
    display: flex !important; align-items: center; justify-content: center; opacity: 1;
}
.pdfmag-swiper { width: 100% !important; height: 100% !important; }
.pdfmag-swiper.swiper:not(.pdfmag-swiper-fade) {
    padding-top: 16px !important; padding-bottom: 36px !important;
}
.pdfmag-swiper:not(.pdfmag-swiper-fade) .swiper-slide {
    display: flex !important; align-items: center; justify-content: center; height: auto !important;
}

/* Fade mode */
.pdfmag-swiper-fade.swiper {
    height: var(--swiper-slide-h, 100%) !important;
    padding-top: 16px !important; padding-bottom: 36px !important; overflow: hidden !important;
}
.pdfmag-swiper-fade .swiper-wrapper {
    height: calc(var(--swiper-slide-h, 100%) - 52px) !important;
}
.pdfmag-swiper-fade .swiper-slide {
    width: 100% !important; height: calc(var(--swiper-slide-h, 100%) - 52px) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
}
.pdfmag-fade-card {
    background: #fff; border-radius: 6px; overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,.7);
    display: flex; flex-direction: column; flex-shrink: 0;
}

/* Carousel swiper nav — matched 1:1 to the flipbook .pdfmag-nav-btn pill
   so both view modes share the exact same arrow style. */
.pdfmag-view-carousel .swiper-button-prev,
.pdfmag-view-carousel .swiper-button-next {
    width:           34px !important;
    height:          68px !important;
    background:      var(--pm-toolbar) !important;
    border:          1px solid var(--pm-text-15) !important;
    border-radius:   8px !important;
    color:           var(--pm-text-55) !important;
    box-shadow:      0 2px 16px rgba(0,0,0,.4), inset 0 1px 0 var(--pm-text-07) !important;
    transition:      background .18s, color .18s, opacity .18s, transform .12s, box-shadow .18s !important;
    outline:         none !important;
    opacity:         0.9 !important;
    margin-top:      -34px !important;
}
.pdfmag-view-carousel .swiper-button-prev::after,
.pdfmag-view-carousel .swiper-button-next::after {
    font-size: 16px !important; font-weight: 900 !important; color: inherit !important;
}
/* Swiper 11+ renders the arrow as an inline <svg>, not a font glyph. Constrain
   it to match the flipbook chevron weight or it fills the whole button. */
.pdfmag-view-carousel .swiper-button-prev .swiper-navigation-icon,
.pdfmag-view-carousel .swiper-button-next .swiper-navigation-icon {
    width:  10px !important;
    height: 18px !important;
    color:  inherit !important;
}
.pdfmag-view-carousel .swiper-button-prev:hover,
.pdfmag-view-carousel .swiper-button-next:hover {
    background:   var(--pm-accent) !important;
    color:        #fff !important;
    border-color: transparent !important;
    opacity:      1 !important;
    box-shadow:   0 4px 24px rgba(0,0,0,.45) !important;
    transform:    scale(1.04) !important;
}
.pdfmag-view-carousel .swiper-button-prev:active,
.pdfmag-view-carousel .swiper-button-next:active { transform: scale(0.94) !important; }
.pdfmag-view-carousel .swiper-button-prev:focus,
.pdfmag-view-carousel .swiper-button-next:focus,
.pdfmag-view-carousel .swiper-button-prev:focus-visible,
.pdfmag-view-carousel .swiper-button-next:focus-visible {
    outline: none !important; box-shadow: 0 2px 14px rgba(0,0,0,.35) !important;
}

/* Pagination */
.pdfmag-view-carousel .swiper-pagination { display: none !important; }
.pdfmag-view-carousel .swiper-pagination-bullet {
    width: 6px !important; height: 6px !important;
    background: var(--pm-text-35) !important; opacity: 1 !important;
    transition: background .2s, transform .2s !important;
}
.pdfmag-view-carousel .swiper-pagination-bullet-active {
    background: var(--pm-accent) !important; transform: scale(1.4);
}

/* Carousel slide card */
.pdfmag-carousel-slide {
    border-radius:  6px;
    overflow:       hidden;
    background:     #fff;
    display:        flex !important;
    flex-direction: column;
    flex-shrink:    0;
    transition:     transform .25s;
    transform:      scale(0.985);
}
.pdfmag-carousel-slide:hover  { }
.swiper-slide-active .pdfmag-carousel-slide { transform: scale(1); }
.pdfmag-cs-pan {
    flex: 1 1 0%; min-height: 0; overflow: hidden;
    background: #f5f5f5; display: flex; align-items: center; justify-content: center;
}
.pdfmag-cs-pan img { display:block; width:100%; height:100%; object-fit:contain; background:#fff; }
.pdfmag-fade-card .pdfmag-cs-pan img { object-fit: contain; }
.pdfmag-cs-num {
    text-align: center; font-size: 10px; color: #888; padding: 4px;
    background: #fff; border-top: 1px solid #eee; flex-shrink: 0; height: 24px; line-height: 16px;
}

/* ══ GRID ═════════════════════════════════════════════════════ */
.pdfmag-view-grid {
    display: none; background: var(--pm-bg);
    overflow-y: auto; overflow-x: hidden; padding: 0;
    scrollbar-width: thin; scrollbar-color: var(--pm-text-15) transparent;
}
.pdfmag-view-grid.active { display: block !important; }
.pdfmag-grid-inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px; padding: 16px; width: 100%; box-sizing: border-box;
}
/* Landscape pages get wider grid columns so tiles keep a sensible size */
.pdfmag-landscape .pdfmag-grid-inner {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.pdfmag-grid-item {
    cursor: pointer; border-radius: 6px; overflow: hidden;
    border: 2px solid transparent; background: #fff;
    transition: transform .18s, border-color .18s, box-shadow .18s;
    position: relative; aspect-ratio: var(--pm-page-ar, 0.707);
}
.pdfmag-grid-item:hover {
    transform: scale(1.03); border-color: var(--pm-accent);
    box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
.pdfmag-grid-item img { display:block; width:100%; height:100%; object-fit:cover; }
.pdfmag-grid-num {
    position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,.6); color: #fff; font-size: 10px;
    padding: 2px 7px; border-radius: 4px; font-weight: 700;
    pointer-events: none; white-space: nowrap;
}

/* Grid lightbox */
.pdfmag-lightbox {
    position: fixed; inset: 0; z-index: 999999;
    background: rgba(0,0,0,.92);
    display: flex; align-items: center; justify-content: center; gap: 16px; padding: 20px;
}
.pdfmag-lightbox-inner {
    position: relative; max-width: 88vw; max-height: 92vh;
    display: flex; flex-direction: column; align-items: center;
    background: #fff; border-radius: 8px; overflow: hidden;
}
.pdfmag-lb-img { display:block; max-width:88vw; max-height:85vh; width:auto; height:auto; object-fit:contain; }
.pdfmag-lb-caption { padding:5px 14px; font-size:11px; color:#777; background:#fff; width:100%; text-align:center; flex-shrink:0; }
.pdfmag-lb-close {
    position:absolute; top:8px; right:8px; background:rgba(0,0,0,.6); color:#fff;
    border:none; border-radius:50%; width:30px; height:30px; font-size:14px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; z-index:2;
}
.pdfmag-lb-prev, .pdfmag-lb-next {
    background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px; width: 44px; height: 80px; font-size: 26px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s;
}
.pdfmag-lb-prev:hover, .pdfmag-lb-next:hover { background: rgba(255,255,255,.28); }

/* ══ THUMBNAILS ═══════════════════════════════════════════════ */
.pdfmag-thumbs-strip {
    height: 0; min-height: 0; overflow-x: auto; overflow-y: hidden;
    display: flex !important; align-items: center; padding: 0; gap: 6px;
    background: var(--pm-toolbar); border-top: 0px solid var(--pm-text-10);
    flex-shrink: 0; transition: height .25s ease, padding .25s ease, border-top-width .25s ease;
    scrollbar-width: thin; scrollbar-color: var(--pm-text-15) transparent;
}
.pdfmag-thumbs-strip.pdfmag-thumbs-open {
    height: 90px !important; padding: 6px 10px; border-top-width: 1px;
}
.pdfmag-thumbs-strip::-webkit-scrollbar { height: 3px; }
.pdfmag-thumbs-strip::-webkit-scrollbar-thumb { background: var(--pm-text-15); border-radius: 2px; }
.pdfmag-thumbs-inner {
    display: flex; gap: 6px; align-items: center; flex-shrink: 0;
    min-width: 100%; justify-content: center;
}
.pdfmag-thumb {
    flex-shrink: 0; cursor: pointer; position: relative;
    border-radius: 4px; overflow: hidden; border: 2px solid transparent; background: #fff;
    transition: border-color .18s, transform .18s, box-shadow .18s;
}
.pdfmag-thumb:hover  { transform: scale(1.05); border-color: var(--pm-text-35); }
.pdfmag-thumb.active { border-color: var(--pm-accent) !important; box-shadow: 0 0 8px rgba(0,0,0,.4); }
.pdfmag-thumb-single { width: 52px; }
.pdfmag-thumb-single img { width: 100%; aspect-ratio: var(--pm-page-ar, 0.707); object-fit: cover; display: block; }
.pdfmag-thumb-spread { width: 96px; }
.pdfmag-thumb-spread-inner { display: flex; width: 100%; aspect-ratio: calc(var(--pm-page-ar, 0.707) * 2); overflow: hidden; }
/* Landscape pages: wider thumbs so they don't collapse into slivers */
.pdfmag-landscape .pdfmag-thumb-single { width: 88px; }
.pdfmag-landscape .pdfmag-thumb-spread { width: 168px; }
.pdfmag-thumb-spread-inner img { flex: 1; width: 50%; height: 100%; object-fit: cover; display: block; }
.pdfmag-thumb-spread-inner img:first-child { border-right: 1px solid #ddd; }
.pdfmag-thumb span {
    position:absolute; bottom:2px; left:50%; transform:translateX(-50%);
    font-size:8px; font-weight:700; background:rgba(0,0,0,.6); color:#fff;
    padding:1px 5px; border-radius:4px; white-space:nowrap; pointer-events:none;
}

/* ══ ZOOM OVERLAY ═════════════════════════════════════════════ */
.pdfmag-zoom-overlay {
    position: absolute; inset: 0; z-index: 15; overflow: auto; cursor: zoom-in;
    scrollbar-width: thin; scrollbar-color: var(--pm-text-15) transparent;
    display: flex; align-items: flex-start; justify-content: center; padding: 20px;
}
.pdfmag-zoom-overlay img { display: block; max-width: none; }

/* ══ UTILITIES ════════════════════════════════════════════════ */
.pdfmag-hidden  { display: none !important; }
.pdfmag-visible { display: flex !important; }
.pdfmag-swiper.swiper-coverflow .swiper-slide { transition-property: all; }

/* ══ RESPONSIVE ═══════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* Controls bar: compact on mobile */
    .pdfmag-title    { max-width: 80px; font-size: 11px; }
    .pdfmag-zoom-pct { display: none; }
    .pdfmag-controls,
    .pdfmag-controls-inner {
        padding: 0 4px;
        gap: 2px;
    }
    .pdfmag-ctrl-btn {
        min-width: 26px;
        height: 28px;
        padding: 0 2px;
    }
    .pdfmag-controls-center {
        gap: 3px;
        font-size: 11px;
        flex-shrink: 0;
        white-space: nowrap;
    }
    .pdfmag-page-input {
        width: 32px !important;
        font-size: 11px !important;
        padding: 0 2px !important;
    }
    .pdfmag-goto-btn {
        padding: 0 6px !important;
        font-size: 10px !important;
    }
    .pdfmag-thumbs-toggle {
        padding: 0 6px !important;
        font-size: 9px !important;
    }
    /* Hide first/last jump buttons — keep only prev/next */
    .pdfmag-ctrl-first,
    .pdfmag-ctrl-last { display: none; }
}

@media (max-width: 400px) {
    /* Ultra-compact: hide "Page" label and GIT button */
    .pdfmag-page-label,
    .pdfmag-goto-btn { display: none; }
    .pdfmag-ctrl-btn { min-width: 22px; height: 24px; }
    .pdfmag-thumbs-toggle span:last-child { display: none; } /* hide text, keep button */
}