.nsp-reader{width:100%;max-width:1536px;margin:0 auto}
.nsp-stage-view{width:100%;line-height:0}
.nsp-page-image{position:relative;width:100%;line-height:0}
.nsp-page-image>img{display:block;width:100%;height:auto;margin:0}
.nsp-hotspot{position:absolute!important;display:block!important;box-sizing:border-box!important;padding:0!important;margin:0!important;border:2px solid transparent!important;background:transparent!important;box-shadow:none!important;z-index:20!important;cursor:pointer!important;min-width:0!important;min-height:0!important;transform:none!important;appearance:none!important;-webkit-appearance:none!important;font-size:0!important;line-height:0!important}
.nsp-hotspot:focus{outline:3px solid rgba(34,113,177,.95)!important;outline-offset:-3px!important}
@media(hover:hover) and (pointer:fine){.nsp-hotspot:hover{background:rgba(34,113,177,.10)!important;border-color:rgba(34,113,177,.55)!important}}

.nsp-page-navigation{display:flex;align-items:center;justify-content:center;gap:18px;padding:14px 0 10px}
.nsp-page-navigation button{width:44px;height:44px;min-width:44px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.18);font-size:30px;line-height:42px;cursor:pointer}
.nsp-page-navigation button:disabled{opacity:.3;cursor:default}
.nsp-page-label{min-width:170px;text-align:center;font:14px/1.4 Arial,sans-serif}

.nsp-thumbnails-wrap{padding:8px 0 20px}
.nsp-thumbnails-label{font:600 13px/1.4 Arial,sans-serif;margin-bottom:7px}
.nsp-thumbnails{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}
.nsp-thumb{position:relative;flex:0 0 74px;width:74px;height:58px;padding:0;border:2px solid transparent;background:#eee;cursor:pointer;overflow:hidden}
.nsp-thumb-page{border-color:#2271b1}
.nsp-thumb-crop{position:absolute;inset:0;overflow:hidden;background:#111}
.nsp-thumb-crop img{position:absolute;max-width:none;max-height:none;display:block;margin:0;padding:0}

.nsp-modal[hidden]{display:none!important}
.nsp-modal{position:fixed!important;inset:0!important;z-index:999999!important;display:flex!important;align-items:center!important;justify-content:center!important}
.nsp-backdrop{position:absolute!important;inset:0!important;background:rgba(0,0,0,.90)!important}
.nsp-dialog{position:relative!important;width:100vw!important;height:100vh!important;z-index:1000000!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important}
.nsp-crop{position:relative!important;width:min(82vw,1200px);height:min(78vh,760px);overflow:hidden!important;background:#111!important;border-radius:4px!important;flex:0 0 auto!important}
.nsp-crop img{position:absolute!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;display:block!important}
.nsp-close,.nsp-prev,.nsp-next{position:absolute!important;z-index:1000005!important;display:flex!important;align-items:center!important;justify-content:center!important;width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;border:0!important;border-radius:50%!important;background:#fff!important;color:#111!important;padding:0!important;margin:0!important;cursor:pointer!important;font-family:Arial,sans-serif!important;font-size:31px!important;line-height:46px!important;opacity:1!important;visibility:visible!important}
.nsp-close{right:18px!important;top:18px!important}
.nsp-prev{left:18px!important;top:50%!important;transform:translateY(-50%)!important}
.nsp-next{right:18px!important;top:50%!important;transform:translateY(-50%)!important}
.nsp-counter{position:absolute!important;z-index:1000005!important;bottom:18px!important;left:0!important;right:0;color:#fff!important;text-align:center!important;font:14px/1.4 Arial,sans-serif!important;pointer-events:none!important}
.nsp-lock,.nsp-lock body{overflow:hidden!important}

@media(min-width:601px) and (max-width:1100px){
 .nsp-close{right:12px!important;top:12px!important}
 .nsp-prev{left:10px!important}
 .nsp-next{right:10px!important}
}

@media(max-width:600px){
 .nsp-page-navigation{gap:12px;padding-top:10px}
 .nsp-page-label{min-width:130px;font-size:13px}
 .nsp-thumbnails-wrap{padding-bottom:14px}
 .nsp-thumb{flex-basis:68px;width:68px;height:54px}
 /* Crop width/height are calculated by JavaScript from the exact panel ratio. */
 .nsp-close{right:10px!important;top:10px!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
 .nsp-prev{left:8px!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
 .nsp-next{right:8px!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
 .nsp-counter{bottom:10px!important}
}


/* === 0.7.0: desktop layout with vertical panel thumbnails === */
@media (min-width:1101px){
  .nsp-reader{
    max-width:1700px;
    display:grid;
    grid-template-columns:150px minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:22px;
    align-items:start;
  }

  .nsp-stage-view{
    grid-column:2;
    grid-row:1;
    min-width:0;
  }

  .nsp-page-navigation{
    grid-column:2;
    grid-row:2;
  }

  .nsp-thumbnails-wrap{
    grid-column:1;
    grid-row:1 / span 2;
    padding:0;
    min-width:0;
    align-self:stretch;
  }

  .nsp-thumbnails-label{
    margin:0 0 10px;
    font-size:14px;
  }

  .nsp-thumbnails{
    display:flex;
    flex-direction:column;
    gap:10px;
    overflow-x:hidden;
    overflow-y:auto;
    padding:2px 8px 8px 2px;
    max-height:calc(100vh - 150px);
    scrollbar-width:thin;
  }

  .nsp-thumb{
    flex:0 0 auto;
    width:126px;
    height:92px;
    min-width:126px;
    border:2px solid rgba(255,255,255,.28);
    background:#111;
    border-radius:2px;
  }

  .nsp-thumb-page{
    border-color:#e5242a;
  }

  .nsp-thumb:focus-visible{
    outline:3px solid #e5242a;
    outline-offset:2px;
  }
}

/* Close control must always sit above Divi, WP admin bar and modal artwork. */
.nsp-close{
  position:fixed!important;
  top:max(14px, env(safe-area-inset-top))!important;
  right:max(14px, env(safe-area-inset-right))!important;
  z-index:2147483647!important;
  box-shadow:0 2px 14px rgba(0,0,0,.35)!important;
}

/* Logged-in desktop: keep the close button below the WordPress admin bar. */
body.admin-bar .nsp-close{
  top:46px!important;
}

@media screen and (max-width:782px){
  body.admin-bar .nsp-close{
    top:60px!important;
  }
}

@media (max-width:1100px){
  .nsp-reader{
    display:block;
    max-width:1536px;
  }
  .nsp-thumbnails-wrap{
    padding:8px 0 20px;
  }
  .nsp-thumbnails{
    display:flex;
    flex-direction:row;
    gap:7px;
    overflow-x:auto;
    overflow-y:hidden;
    max-height:none;
    padding:2px 2px 8px;
  }
  .nsp-thumb{
    flex:0 0 74px;
    width:74px;
    height:58px;
  }
}

@media (max-width:600px){
  .nsp-thumb{
    flex-basis:68px;
    width:68px;
    height:54px;
  }
  .nsp-close{
    top:max(10px, env(safe-area-inset-top))!important;
    right:max(10px, env(safe-area-inset-right))!important;
  }
  body.admin-bar .nsp-close{
    top:60px!important;
  }
}


/* === 0.7.1: modal is portaled to BODY to avoid Divi mobile transform/overflow traps === */
body > .nsp-modal{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:100vh!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  overflow:hidden!important;
  z-index:2147483000!important;
}

body > .nsp-modal .nsp-backdrop{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:100vh!important;
  z-index:2147483001!important;
}

body > .nsp-modal .nsp-dialog{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:100vh!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  z-index:2147483002!important;
}

body > .nsp-modal .nsp-crop{
  z-index:2147483003!important;
}

body > .nsp-modal .nsp-prev,
body > .nsp-modal .nsp-next,
body > .nsp-modal .nsp-counter{
  z-index:2147483004!important;
}

body > .nsp-modal .nsp-close{
  position:fixed!important;
  z-index:2147483647!important;
}

/* Keep controls inside the visible area on short landscape phones. */
@media (max-height:500px) and (orientation:landscape){
  body > .nsp-modal .nsp-close{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    font-size:28px!important;
  }
  body > .nsp-modal .nsp-prev,
  body > .nsp-modal .nsp-next{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
  }
  body > .nsp-modal .nsp-counter{
    bottom:6px!important;
  }
}


/* === 0.7.2: compact mobile modal + navigation below the panel === */
@media (max-width:600px){

  /* The dialog no longer behaves as a full-height flex canvas.
     Content is grouped around the actual crop instead. */
  body > .nsp-modal .nsp-dialog{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:12px!important;
    padding:
      max(72px, calc(env(safe-area-inset-top) + 62px))
      12px
      max(18px, env(safe-area-inset-bottom))
      12px!important;
    box-sizing:border-box!important;
  }

  body > .nsp-modal .nsp-crop{
    flex:0 0 auto!important;
    margin:0!important;
  }

  /* On phones the arrows form a navigation row BELOW the crop. */
  body > .nsp-modal .nsp-prev,
  body > .nsp-modal .nsp-next{
    position:absolute!important;
    top:auto!important;
    bottom:max(54px, calc(env(safe-area-inset-bottom) + 44px))!important;
    transform:none!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
  }

  body > .nsp-modal .nsp-prev{
    left:calc(50% - 82px)!important;
  }

  body > .nsp-modal .nsp-next{
    right:calc(50% - 82px)!important;
  }

  body > .nsp-modal .nsp-counter{
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:max(65px, calc(env(safe-area-inset-bottom) + 55px))!important;
    transform:translateX(-50%)!important;
    margin:0!important;
    white-space:nowrap!important;
  }

  /* Reserve the navigation strip under the image without creating a huge
     empty area above it. */
  body > .nsp-modal .nsp-crop{
    transform:translateY(-34px);
  }
}

/* Very short landscape phone: use an even tighter navigation strip. */
@media (max-height:500px) and (orientation:landscape){
  body > .nsp-modal .nsp-dialog{
    padding:52px 10px 10px!important;
  }
  body > .nsp-modal .nsp-crop{
    transform:translateY(-20px);
  }
  body > .nsp-modal .nsp-prev,
  body > .nsp-modal .nsp-next{
    bottom:8px!important;
  }
  body > .nsp-modal .nsp-counter{
    bottom:17px!important;
  }
}


/* === 0.7.3: mobile controls belong to the crop, not the viewport bottom === */
@media (max-width:600px){

  body > .nsp-modal .nsp-dialog{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    padding:
      max(68px, calc(env(safe-area-inset-top) + 58px))
      12px
      max(74px, calc(env(safe-area-inset-bottom) + 64px))
      12px!important;
    box-sizing:border-box!important;
  }

  body > .nsp-modal .nsp-crop{
    transform:translateY(-28px)!important;
  }

  /* Controls are vertically tied to the centre of the screen plus half of the
     rendered crop height. This places them directly under panels of any ratio. */
  body > .nsp-modal .nsp-prev,
  body > .nsp-modal .nsp-next,
  body > .nsp-modal .nsp-counter{
    position:fixed!important;
    top:calc(50% + var(--nsp-crop-half-h, 150px) + 12px)!important;
    bottom:auto!important;
  }

  body > .nsp-modal .nsp-prev,
  body > .nsp-modal .nsp-next{
    transform:translateY(-28px)!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
  }

  body > .nsp-modal .nsp-prev{
    left:calc(50% - 82px)!important;
  }

  body > .nsp-modal .nsp-next{
    right:calc(50% - 82px)!important;
  }

  body > .nsp-modal .nsp-counter{
    left:50%!important;
    right:auto!important;
    transform:translate(-50%, -17px)!important;
    white-space:nowrap!important;
  }
}


/* === 0.7.4: robust mobile navigation row BELOW the crop === */
@media (max-width:600px){

  /* On mobile, the modal dialog is a real vertical layout:
     crop first, navigation row second. No absolute/fixed placement of arrows. */
  body > .nsp-modal .nsp-dialog{
    position:fixed!important;
    inset:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:14px!important;
    padding:
      max(70px, calc(env(safe-area-inset-top) + 60px))
      12px
      max(20px, env(safe-area-inset-bottom))
      12px!important;
    box-sizing:border-box!important;
  }

  body > .nsp-modal .nsp-crop{
    position:relative!important;
    transform:none!important;
    flex:0 0 auto!important;
    margin:0!important;
  }

  /* Turn the existing controls into a visual row below the crop.
     They remain siblings in the dialog, so order controls their layout. */
  body > .nsp-modal .nsp-prev,
  body > .nsp-modal .nsp-counter,
  body > .nsp-modal .nsp-next{
    position:static!important;
    inset:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    transform:none!important;
    margin:0!important;
  }

  body > .nsp-modal .nsp-prev{
    order:2!important;
    margin-right:116px!important;
  }

  body > .nsp-modal .nsp-counter{
    order:3!important;
    margin-top:-46px!important;
    min-height:46px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    white-space:nowrap!important;
    line-height:1.2!important;
    pointer-events:none!important;
    max-width:112px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  body > .nsp-modal .nsp-next{
    order:4!important;
    margin-left:116px!important;
    margin-top:-46px!important;
  }

  body > .nsp-modal .nsp-crop{
    order:1!important;
  }

  body > .nsp-modal .nsp-prev,
  body > .nsp-modal .nsp-next{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    flex:0 0 46px!important;
  }
}

/* iPhone / short screens: slightly smaller controls and tighter row,
   still physically below the image. */
@media (max-width:430px), (max-height:700px){
  body > .nsp-modal .nsp-dialog{
    gap:10px!important;
    padding:
      max(66px, calc(env(safe-area-inset-top) + 56px))
      10px
      max(14px, env(safe-area-inset-bottom))
      10px!important;
  }

  body > .nsp-modal .nsp-prev,
  body > .nsp-modal .nsp-next{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    flex-basis:42px!important;
  }

  body > .nsp-modal .nsp-prev{
    margin-right:108px!important;
  }

  body > .nsp-modal .nsp-counter{
    margin-top:-42px!important;
    min-height:42px!important;
    max-width:104px!important;
    font-size:14px!important;
  }

  body > .nsp-modal .nsp-next{
    margin-left:108px!important;
    margin-top:-42px!important;
  }
}


/* === 0.7.5: definitive mobile navigation grid === */

/* Desktop/tablet default: wrapper must not alter the existing overlay geometry. */
.nsp-mobile-nav{
  display:contents;
}

@media (max-width:600px){

  body > .nsp-modal .nsp-dialog{
    position:fixed!important;
    inset:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:12px!important;
    padding:
      max(70px, calc(env(safe-area-inset-top) + 60px))
      12px
      max(18px, env(safe-area-inset-bottom))
      12px!important;
    box-sizing:border-box!important;
  }

  body > .nsp-modal .nsp-crop{
    position:relative!important;
    order:1!important;
    transform:none!important;
    flex:0 0 auto!important;
    margin:0!important;
  }

  body > .nsp-modal .nsp-mobile-nav{
    order:2!important;
    display:grid!important;
    grid-template-columns:52px minmax(0,1fr) 52px!important;
    align-items:center!important;
    column-gap:12px!important;
    width:min(100%, 310px)!important;
    height:52px!important;
    flex:0 0 52px!important;
    margin:0 auto!important;
    padding:0!important;
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    z-index:2147483004!important;
  }

  body > .nsp-modal .nsp-mobile-nav .nsp-prev,
  body > .nsp-modal .nsp-mobile-nav .nsp-next,
  body > .nsp-modal .nsp-mobile-nav .nsp-counter{
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    transform:none!important;
    margin:0!important;
    order:initial!important;
  }

  body > .nsp-modal .nsp-mobile-nav .nsp-prev,
  body > .nsp-modal .nsp-mobile-nav .nsp-next{
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
    min-height:52px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
  }

  body > .nsp-modal .nsp-mobile-nav .nsp-prev{
    grid-column:1!important;
  }

  body > .nsp-modal .nsp-mobile-nav .nsp-counter{
    grid-column:2!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    display:block!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
    line-height:1.2!important;
    font-size:15px!important;
    pointer-events:none!important;
  }

  body > .nsp-modal .nsp-mobile-nav .nsp-next{
    grid-column:3!important;
  }
}

/* Smaller iPhones: same grid, only slightly tighter dimensions. */
@media (max-width:390px){
  body > .nsp-modal .nsp-mobile-nav{
    grid-template-columns:46px minmax(0,1fr) 46px!important;
    column-gap:8px!important;
    width:min(100%, 286px)!important;
    height:46px!important;
    flex-basis:46px!important;
  }

  body > .nsp-modal .nsp-mobile-nav .nsp-prev,
  body > .nsp-modal .nsp-mobile-nav .nsp-next{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
  }

  body > .nsp-modal .nsp-mobile-nav .nsp-counter{
    font-size:14px!important;
  }
}

/* Short landscape phone: preserve the same structure and reduce vertical gaps. */
@media (max-height:500px) and (orientation:landscape){
  body > .nsp-modal .nsp-dialog{
    gap:6px!important;
    padding:
      max(50px, calc(env(safe-area-inset-top) + 44px))
      10px
      max(8px, env(safe-area-inset-bottom))
      10px!important;
  }

  body > .nsp-modal .nsp-mobile-nav{
    grid-template-columns:40px minmax(0,1fr) 40px!important;
    width:min(100%, 270px)!important;
    height:40px!important;
    flex-basis:40px!important;
  }

  body > .nsp-modal .nsp-mobile-nav .nsp-prev,
  body > .nsp-modal .nsp-mobile-nav .nsp-next{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
  }
}

/* 0.7.7 - 3px inner white frame on enlarged panel only */
body > .nsp-modal .nsp-crop{position:relative!important;}
body > .nsp-modal .nsp-crop::after{
 content:"";position:absolute;inset:0;pointer-events:none;z-index:20;
 box-shadow:inset 0 0 0 3px #fff;
}