/* ============================================================
   FLIPBOOK — catálogo folheável
   Overlay em tela cheia com virada de página real e som de papel.
   ============================================================ */

.flip-ov{
  position:fixed; inset:0; z-index:100; display:none;
  background:radial-gradient(120% 90% at 50% 0%, #3B3937 0%, #1C1B1A 62%, #131211 100%);
  flex-direction:column;
}
.flip-ov.aberto{display:flex}
body.flip-travado{overflow:hidden}

/* --- barra de cima --- */
.flip-topo{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px clamp(14px,3vw,30px); color:#EFECE6; flex:none;
  border-bottom:1px solid rgba(239,236,230,.12);
}
.flip-topo__id{min-width:0}
.flip-topo__id b{
  display:block; font-weight:600; font-size:1.02rem; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.flip-topo__id span{font-size:.82rem; color:#A9A49C}
.flip-acoes{display:flex; align-items:center; gap:8px; flex:none}

.fbtn{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:rgba(239,236,230,.08); border:1px solid rgba(239,236,230,.2); color:#EFECE6;
  cursor:pointer; transition:.3s cubic-bezier(.16,1,.3,1);
}
.fbtn:hover{background:var(--roxo); border-color:var(--roxo); color:#1C1B1A; transform:translateY(-2px)}
.fbtn:disabled{opacity:.32; cursor:default; transform:none}
.fbtn:disabled:hover{background:rgba(239,236,230,.08); border-color:rgba(239,236,230,.2); color:#EFECE6}
.fbtn svg{width:19px; height:19px}
.fbtn.desligado .on{display:none}
.fbtn:not(.desligado) .off{display:none}

/* --- palco --- */
.flip-palco{
  flex:1; display:grid; place-items:center; position:relative;
  padding:clamp(10px,2.4vw,26px); min-height:0;
}
.flip-livro{
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85);
  transition:opacity .45s ease;
}
.flip-livro.carregando{opacity:0}
/* páginas montadas pelo StPageFlip */
.flip-pag{background:#fff; overflow:hidden}
.flip-pag img{width:100%; height:100%; object-fit:contain; display:block; background:#fff}
.flip-pag--capa{background:#EDEAE4}

/* setas laterais */
.flip-seta{
  position:absolute; top:50%; margin-top:-27px; width:54px; height:54px; z-index:5;
  border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:rgba(239,236,230,.1); border:1px solid rgba(239,236,230,.22); color:#EFECE6;
  transition:.3s cubic-bezier(.16,1,.3,1);
}
.flip-seta:hover{background:var(--roxo); color:#1C1B1A; border-color:var(--roxo)}
.flip-seta:disabled{opacity:.22; cursor:default}
.flip-seta.ant{left:clamp(6px,1.6vw,22px)}
.flip-seta.prox{right:clamp(6px,1.6vw,22px)}
.flip-seta svg{width:22px; height:22px}
@media(max-width:640px){.flip-seta{width:44px; height:44px; margin-top:-22px}}

/* carregando */
.flip-load{
  position:absolute; inset:0; display:grid; place-items:center; color:#EFECE6;
  font-size:.9rem; letter-spacing:.14em; text-transform:uppercase; pointer-events:none;
  transition:opacity .4s ease;
}
.flip-load.some{opacity:0}
.flip-load i{
  display:block; width:34px; height:34px; margin:0 auto 14px; border-radius:50%;
  border:2px solid rgba(239,236,230,.22); border-top-color:var(--roxo);
  animation:girando .9s linear infinite;
}
@keyframes girando{to{transform:rotate(360deg)}}

/* --- barra de baixo --- */
.flip-base{
  flex:none; padding:12px clamp(14px,3vw,30px) 18px; color:#EFECE6;
  border-top:1px solid rgba(239,236,230,.12);
  display:flex; align-items:center; gap:clamp(12px,2.4vw,26px);
}
.flip-conta{font-size:.86rem; color:#A9A49C; white-space:nowrap; font-variant-numeric:tabular-nums}
.flip-conta b{color:#EFECE6; font-weight:600}
.flip-barra{flex:1; position:relative; height:34px; display:grid; align-items:center; min-width:0}
.flip-barra input[type=range]{
  width:100%; -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer; margin:0;
}
.flip-barra input[type=range]::-webkit-slider-runnable-track{
  height:4px; border-radius:99px;
  background:linear-gradient(to right,var(--roxo) var(--pct,0%),rgba(239,236,230,.2) var(--pct,0%));
}
.flip-barra input[type=range]::-moz-range-track{height:4px; border-radius:99px; background:rgba(239,236,230,.2)}
.flip-barra input[type=range]::-moz-range-progress{height:4px; border-radius:99px; background:var(--roxo)}
.flip-barra input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; margin-top:-6px; border-radius:50%;
  background:var(--roxo); border:2px solid #1C1B1A; box-shadow:0 2px 8px rgba(0,0,0,.5);
  transition:transform .22s ease;
}
.flip-barra input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.22)}
.flip-barra input[type=range]::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:var(--roxo); border:2px solid #1C1B1A;
}
.flip-aviso{
  font-size:.78rem; color:#8E8A83; white-space:nowrap;
}
@media(max-width:720px){
  .flip-aviso{display:none}
  .flip-topo__id span{display:none}
}

/* miniaturas */
.flip-thumbs{
  display:none; gap:8px; overflow-x:auto; padding:12px clamp(14px,3vw,30px);
  border-top:1px solid rgba(239,236,230,.12); flex:none; scrollbar-width:thin;
}
.flip-thumbs.aberto{display:flex}
.flip-thumbs button{
  flex:none; width:58px; border:2px solid transparent; border-radius:4px; overflow:hidden;
  background:#2A2827; cursor:pointer; padding:0; transition:.25s ease; line-height:0;
}
.flip-thumbs button:hover{border-color:rgba(227,80,253,.6)}
.flip-thumbs button[aria-current="true"]{border-color:var(--roxo)}
.flip-thumbs img{width:100%; display:block}

/* dica de arraste (some no primeiro flip) */
.flip-dica{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  color:#EFECE6; font-size:.8rem; background:rgba(28,27,26,.75); border:1px solid rgba(239,236,230,.18);
  padding:8px 16px; border-radius:99px; pointer-events:none; z-index:6;
  animation:respira 2.6s ease-in-out infinite; white-space:nowrap;
}
.flip-dica.some{display:none}
@keyframes respira{0%,100%{opacity:.55} 50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.flip-dica{animation:none}}