/* v11.3.0 - minimalist bottom controls + draggable page thumb */
@media (min-width: 769px){
  .controls{
    height:70px!important;
    min-height:70px!important;
    padding:9px 22px!important;
    grid-template-columns:minmax(126px,170px) minmax(240px,1fr) auto minmax(150px,206px)!important;
    gap:12px!important;
    background:linear-gradient(180deg, rgba(9,8,5,.70), rgba(0,0,0,.88))!important;
    border-top:1px solid rgba(219,172,42,.24)!important;
    box-shadow:0 -10px 28px rgba(0,0,0,.34), inset 0 1px rgba(255,232,158,.10)!important;
    backdrop-filter:blur(14px) saturate(125%)!important;
  }
  .ctrl-btn{
    height:44px!important;
    border-radius:13px!important;
    padding:0 17px!important;
    font-size:13px!important;
    letter-spacing:.01em!important;
    box-shadow:inset 0 1px rgba(255,255,255,.10), 0 8px 18px rgba(0,0,0,.22)!important;
  }
  .ctrl-next{
    font-weight:800!important;
    background:linear-gradient(180deg,#ffe38a 0%, #c99719 100%)!important;
  }
  .pager{
    padding:0 4px!important;
    align-self:center!important;
    display:grid!important;
    grid-template-columns:auto 1fr!important;
    align-items:center!important;
    column-gap:14px!important;
  }
  #pageCount{
    min-width:74px!important;
    height:28px!important;
    margin:0!important;
    padding:0 10px!important;
    font-size:12px!important;
    letter-spacing:.06em!important;
    background:rgba(255,224,125,.06)!important;
    border-color:rgba(255,224,125,.14)!important;
  }
  .range{
    position:relative!important;
    height:4px!important;
    min-width:180px!important;
    border-radius:999px!important;
    cursor:pointer!important;
    overflow:visible!important;
    background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(218,170,37,.24), rgba(255,255,255,.08))!important;
  }
  .range::before{
    content:"";
    position:absolute;
    left:0;right:0;top:-14px;bottom:-14px;
  }
  .range i{
    width:18px!important;
    height:18px!important;
    margin-left:-9px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    cursor:grab!important;
    background:linear-gradient(180deg,#ffdf6e,#b98209)!important;
    border:1px solid rgba(255,239,169,.82)!important;
    box-shadow:0 5px 12px rgba(0,0,0,.36), 0 0 0 4px rgba(214,169,40,.08)!important;
  }
  .range.is-dragging i{cursor:grabbing!important;transform:translateY(-50%) scale(1.12)!important;}
  .view-buttons{
    padding:4px!important;
    border-radius:12px!important;
    background:rgba(255,230,151,.045)!important;
    border-color:rgba(244,203,83,.13)!important;
  }
  .view-btn{
    width:36px!important;
    height:34px!important;
    border-radius:9px!important;
    font-size:13px!important;
    opacity:.86;
  }
  .view-btn.is-active{opacity:1!important;}
  body.op-reader-large:not(.op-catalog-fullscreen) .stage{
    padding-top:10px!important;
    min-height:calc(100vh - 70px)!important;
  }
  body.op-reader-large:not(.op-catalog-fullscreen) .book-wrap{
    transform:scale(1.075)!important;
    transform-origin:center top!important;
    transition:transform .34s cubic-bezier(.2,.8,.2,1)!important;
  }
  body.op-catalog-fullscreen .book-wrap{
    transform:scale(1.18)!important;
    transform-origin:center center!important;
  }
}

/* v12.10.111 - fullscreen zoom buttons must actually change the catalog size. */
@media (min-width: 769px){
  body.op-catalog-fullscreen:not(.op-reader-large) .book-wrap{
    transform:scale(1.08)!important;
    transform-origin:center center!important;
    transition:transform .28s cubic-bezier(.2,.8,.2,1)!important;
  }
  body.op-catalog-fullscreen.op-reader-large .book-wrap{
    transform:scale(1.24)!important;
    transform-origin:center center!important;
    transition:transform .28s cubic-bezier(.2,.8,.2,1)!important;
  }
  body.op-catalog-fullscreen .view-buttons,
  body.op-catalog-fullscreen .view-btn{
    pointer-events:auto!important;
    visibility:visible!important;
    opacity:1!important;
    z-index:120000!important;
  }
}