/* WP Flipbook — Viewer Styles v1.0.2 (Mobile First)
 *
 * CORREÇÃO v1.0.2:
 *  - overflow:hidden removido do wrapper (cortava a página direita no desktop)
 *  - .stf__parent e .stf__wrapper não têm mais max-width forçado
 *  - .fb-stage-wrap com overflow:hidden para conter o livro corretamente
 *  - .fb-page img com object-fit:contain (não cover) para não cortar conteúdo
 *  - fb-stage-wrap com height dinâmica (controlada pelo JS)
 *  - Fullscreen reescrito para centralizar corretamente
 */

/* ── Wrapper ─────────────────────────────────────────── */
.fb-wrapper {
    --fb-bg:      #1a1a2e;
    --fb-radius:  10px;
    --fb-btn-sz:  44px;
    width:        100%;
    max-width:    100%;
    background:   var(--fb-bg);
    border-radius: var(--fb-radius);
    padding:      12px;
    box-sizing:   border-box;
    /* REMOVIDO overflow:hidden — estava cortando a segunda página no desktop */
    font-family:  -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    touch-action: pan-y;
    user-select:  none;
    -webkit-user-select: none;
}

/* ── Toolbar ─────────────────────────────────────────── */
.fb-toolbar {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         6px 0;
    margin-bottom:   8px;
    flex-wrap:       wrap;
}

.fb-btn {
    min-width:       var(--fb-btn-sz);
    min-height:      var(--fb-btn-sz);
    padding:         0 10px;
    font-size:       22px;
    line-height:     1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      rgba(255,255,255,0.12);
    color:           #fff;
    border:          none;
    border-radius:   8px;
    cursor:          pointer;
    text-decoration: none;
    transition:      background 0.15s;
    -webkit-tap-highlight-color: transparent;
    outline:         none;
}

.fb-btn:hover,
.fb-btn:focus-visible {
    background: rgba(255,255,255,0.22);
}

.fb-btn:active {
    transform: scale(0.95);
}

.fb-btn--prev,
.fb-btn--next {
    font-size:   28px;
    font-weight: bold;
}

.fb-counter {
    color:       rgba(255,255,255,0.85);
    font-size:   13px;
    min-width:   70px;
    text-align:  center;
    font-variant-numeric: tabular-nums;
}

/* ── Stage wrap ──────────────────────────────────────── */
.fb-stage-wrap {
    position:   relative;
    width:      100%;
    /* overflow:hidden aqui (não no wrapper) — contém o livro sem cortar */
    overflow:   hidden;
    /* altura definida via JS após criar o book */
    min-height: 200px;
}

/* ── Stage ───────────────────────────────────────────── */
.fb-stage {
    width:           100%;
    height:          100%;
    display:         flex;
    justify-content: center;
    align-items:     flex-start;
}

/*
 * NÃO aplicar max-width nos containers internos do StPageFlip.
 * O stf__parent e stf__wrapper têm largura calculada pelo StPageFlip
 * (2×pageWidth no modo duplo). Forçar max-width:100% corta a 2ª página.
 *
 * Em vez disso, o overflow:hidden no .fb-stage-wrap já protege
 * contra vazamento fora do componente.
 */
.fb-stage .stf__parent {
    /* sem max-width — deixa o StPageFlip controlar */
    touch-action: pan-y;
}

.fb-stage canvas {
    max-width: 100%;
    touch-action: pan-y;
}

/* ── Loader / Spinner ─────────────────────────────────── */
.fb-loader {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--fb-bg);
    z-index:         10;
    border-radius:   var(--fb-radius);
}

.fb-spinner {
    width:            36px;
    height:           36px;
    border:           3px solid rgba(255,255,255,0.15);
    border-top-color: rgba(255,255,255,0.8);
    border-radius:    50%;
    animation:        fb-spin 0.7s linear infinite;
}

@keyframes fb-spin {
    to { transform: rotate(360deg); }
}

/* ── Páginas (StPageFlip) ─────────────────────────────── */
.fb-page {
    background: #fff;
    overflow:   hidden;
}

.fb-page img {
    width:      100%;
    height:     100%;
    display:    block;
    /* object-fit:contain — preserva proporção sem cortar conteúdo da página */
    object-fit: contain;
    background: #fff;
}

/* ── Thumbnails ──────────────────────────────────────── */
.fb-thumbs {
    display:          flex;
    gap:              6px;
    overflow-x:       auto;
    padding:          10px 0 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:  thin;
    scrollbar-color:  rgba(255,255,255,0.3) transparent;
}

.fb-thumbs::-webkit-scrollbar       { height: 4px; }
.fb-thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 2px; }

.fb-thumb {
    height:            64px;
    width:             auto;
    min-width:         44px;
    border-radius:     4px;
    scroll-snap-align: start;
    border:            2px solid transparent;
    cursor:            pointer;
    flex-shrink:       0;
    transition:        border-color 0.15s, opacity 0.15s;
    opacity:           0.65;
    object-fit:        cover;
}

.fb-thumb:hover,
.fb-thumb:focus-visible { opacity: 1; outline: none; border-color: rgba(255,255,255,0.5); }
.fb-thumb.active         { border-color: #fff; opacity: 1; }

/* ── Error ───────────────────────────────────────────── */
.flipbook-error {
    padding:       12px 16px;
    background:    #fff3cd;
    border:        1px solid #ffc107;
    border-radius: 6px;
    color:         #664d03;
    font-size:     14px;
}

/* ── Fullscreen ──────────────────────────────────────── */
.fb-wrapper:fullscreen,
.fb-wrapper:-webkit-full-screen {
    background:      var(--fb-bg);
    display:         flex;
    flex-direction:  column;
    justify-content: flex-start;
    align-items:     stretch;
    padding:         12px 16px;
    border-radius:   0;
    width:           100vw;
    height:          100vh;
    box-sizing:      border-box;
    overflow:        hidden;
}

.fb-wrapper:fullscreen .fb-stage-wrap,
.fb-wrapper:-webkit-full-screen .fb-stage-wrap {
    flex:            1;
    width:           100%;
    overflow:        visible;  /* JS controla o tamanho exato */
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      0;        /* permite encolher dentro do flex */
}

.fb-wrapper:fullscreen .fb-stage,
.fb-wrapper:-webkit-full-screen .fb-stage {
    justify-content: center;
    align-items:     center;
}

/* ── Tablet / Desktop ────────────────────────────────── */
@media (min-width: 768px) {
    .fb-wrapper { padding: 16px 20px; }

    .fb-btn {
        min-width:  38px;
        min-height: 38px;
        font-size:  20px;
    }

    .fb-thumb  { height: 72px; }
    .fb-counter { font-size: 14px; }
}

@media (min-width: 1024px) {
    .fb-thumb { height: 80px; }
}

/* ── Reduced motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .fb-spinner { animation: none; opacity: 0.5; }
}