.pdf-flipbook{
  width:100%;
  max-width:1400px;
  margin:20px auto;
  overflow:hidden;
  background:#222;
  color:#fff;
  border:1px solid #444;
  font-family:Arial,sans-serif;

  .pdf-toolbar{
    position:relative;
    display:flex;
    align-items:center;
    gap:8px;
    min-height:50px;
    padding:8px 12px;
    background:#111;
    border-bottom:1px solid #444;

    button{
      height:34px;
      min-width:34px;
      border:1px solid #555;
      border-radius:4px;
      background:#333;
      color:#fff;
      cursor:pointer;

      &:hover{background:#444}

      svg{
        fill: white;
        
        path{
          fill: white;
          stroke: white;
        }
      }
    }

    .pdf-page{
      min-width:80px;
      text-align:center;
      font-size:14px;
    }

    .pdf-search{
      flex:1;
      max-width:400px;
      height:34px;
      padding:0 10px;
      border:1px solid #555;
      border-radius:4px;
      background:#222;
      color:#fff;

      &::placeholder{color:#aaa}
    }

    .pdf-search-results{
      position:absolute;
      top:55px;
      left:50%;
      z-index:1000;
      display:none;
      width:360px;
      max-height:300px;
      overflow-y:auto;
      transform:translateX(-50%);
      background:#fff;
      color:#222;
      border:1px solid #ccc;
      border-radius:5px;
      box-shadow:0 4px 15px rgba(0,0,0,.25);

      .pdf-search-result{
        display:flex;
        align-items:center;
        justify-content:space-between;
        width:100%;
        padding:9px 12px;
        border:0;
        border-bottom:1px solid #eee;
        background:#fff;
        color:#222;
        text-align:left;
        cursor:pointer;

        &:hover{background:#f2f2f2}

        .pdf-search-result-page{font-weight:600}
        .pdf-search-result-count{
          font-size:12px;
          color:#777;
        }
      }
    }
  }

  .pdf-content{
    display:flex;
    height:80vh;
    min-height:600px;
  }

  .pdf-thumbnails{
    flex-shrink:0;
    width:150px;
    padding:12px;
    overflow-y:auto;
    background:#181818;
    border-right:1px solid #444;

    .pdf-thumbnail{
      width:100%;
      margin-bottom:12px;
      padding:5px;
      border:2px solid transparent;
      border-radius:4px;
      background:transparent;
      color:#ccc;
      cursor:pointer;

      &:hover{background:#292929}
      &.active{border-color:#fff}

      canvas{
        display:block;
        width:100%;
        height:auto;
        margin:auto;
        background:#fff;
        box-shadow:0 2px 6px rgba(0,0,0,.5);
      }

      span{
        display:block;
        margin-top:5px;
        font-size:12px;
        text-align:center;
      }
    }
  }

  .pdf-viewer{
    position:relative;
    flex:1;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:30px;
    overflow:auto;
    background:#333;

    .loader-pdf{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: .3s ease-in-out;
      &.is-loading{
        opacity: 1;
        visibility: visible;
      }
    }
  }

  .pdf-page-container{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    overflow:hidden;
    perspective:1800px;

    .pdf-book{
      display:flex;
      justify-content:center;
      transform-style:preserve-3d;
      transform-origin:center;

      .pdf-book-page{
        position:relative;
        transform-style:preserve-3d;
        backface-visibility:visible;

        canvas{display:block}
      }
    }

    &.cover-mode .pdf-book-page{margin:0 auto}

    &.spread-mode .pdf-book{
      flex-direction:row;
      align-items:stretch;

      .pdf-book-page{margin:0}
    }

    &.flip-next .pdf-book{animation:pdfFlipNext .45s ease}
    &.flip-prev .pdf-book{animation:pdfFlipPrev .45s ease}
  }

  .pdf-canvas{display:block}

  .pdf-text-layer{
    position:absolute;
    inset:0;
    z-index:2;
    overflow:hidden;
    line-height:1;
    opacity:1;

    span{
      position:absolute;
      z-index:3;
      color:transparent;
      white-space:pre;
      cursor:text;
      transform-origin:0 0;

      &::selection{
        background:rgba(0,100,255,.35);
      }
    }
  }

  .pdf-search-highlight{
    position:absolute;
    z-index:10;
    background:rgba(115,195,241,.55);
    border-radius:3px;
    pointer-events:none;

    &.current{background:rgba(127,243,92,.55)}
  }
}

@keyframes pdfFlipNext{
  0%{transform:perspective(1800px) rotateY(0) translateX(0)}
  45%{transform:perspective(1800px) rotateY(-4deg) translateX(-12px)}
  100%{transform:perspective(1800px) rotateY(0) translateX(0)}
}

@keyframes pdfFlipPrev{
  0%{transform:perspective(1800px) rotateY(0) translateX(0)}
  45%{transform:perspective(1800px) rotateY(4deg) translateX(12px)}
  100%{transform:perspective(1800px) rotateY(0) translateX(0)}
}

@media(max-width:768px){
  .pdf-flipbook{
    .pdf-content{
      height:75vh;
      min-height:450px;
    }

    .pdf-thumbnails{
      width:90px;
      padding:6px;
    }

    .pdf-viewer{padding:15px}

    .pdf-toolbar{
      flex-wrap:wrap;

      .pdf-search{
        order:10;
        width:100%;
        max-width:none;
      }
    }

    .pdf-search-results{
      width:calc(100% - 30px);
      max-width:360px;
    }

    .pdf-page-container{
      .pdf-book{
        max-width:100%;
      }

      .pdf-book-page{
        max-width:100%;

        canvas{
          max-width:100%;
          height:auto!important;
        }
      }

      &.spread-mode{
        .pdf-book-page.pdf-book-right{display:none}
      }
    }
  }
}