/* ==========================================================
   PRODUCT VIEWER — versão mínima funcional (Etapa B)
   O visual de "produto físico" (capa, Wire-O, sombra,
   profundidade) entra na Etapa C, por cima do que já
   funciona aqui.
========================================================== */

.product-viewer-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(20, 20, 25, .85);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-viewer-window {
    position: relative;
    width: min(90vw, 1000px);
    height: min(85vh, 1200px);
    background: #2b2b33;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.product-viewer-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 16px;
}

.product-viewer-close,
.product-viewer-toggle-view {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
}

.product-viewer-close:hover,
.product-viewer-toggle-view:hover {
    background: rgba(255, 255, 255, .1);
}

.product-viewer-approve {
    background: var(--color-success, #10b981);
    border-color: var(--color-success, #10b981);
    color: #fff;
}

.product-viewer-approve:hover:not(:disabled) {
    opacity: .9;
}

.product-viewer-approve:disabled {
    opacity: .7;
    cursor: default;
}

.product-viewer-flip-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}


/* ==========================================================
   PRODUTO FÍSICO (Etapa C) — capa/profundidade/Wire-O por
   cima do flip-container que a Etapa B já deixou
   funcionando. Puramente visual.
========================================================== */

.product-viewer-book-shell {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 24px;
}

.product-viewer-book-shell .product-viewer-flip-container {
    width: 100%;
    height: 100%;
    filter:
        drop-shadow(0 25px 45px rgba(0, 0, 0, .55))
        drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
}

/*--------------------------------------------------
  "Miolo" — sugere páginas empilhadas atrás do livro,
  dando sensação de espessura/profundidade.

  IMPORTANTE: este retângulo cobre toda a área disponível
  (inset: 24px, igual ao padding do shell), mas o canvas real
  (dimensionado em JS pelo PageFlip em modo "stretch", preso à
  proporção real da página) quase nunca preenche essa área
  inteira — sobra uma faixa onde esse "miolo" aparece por trás.
  Com a cor antiga (creme, quase branca), essa faixa parecia uma
  "folha extra" de margem em branco ao redor da página de
  verdade, dando a falsa impressão de que a margem configurada
  era maior do que é (a margem real, da imagem e do PDF, sempre
  esteve correta — ver conversa com a usuária). Cor escura aqui
  evita a ilusão sem precisar calcular o retângulo exato do
  canvas.
--------------------------------------------------*/

.product-viewer-book-shell::before {
    content: "";
    position: absolute;
    inset: 24px;
    border-radius: 4px;
    background: #38383f;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .2),
        2px 2px 0 1px #343439,
        4px 4px 0 1px #303035,
        6px 6px 0 1px #2c2c31;
    z-index: 0;
}

.product-viewer-book-shell .product-viewer-flip-container {
    position: relative;
    z-index: 1;
}

/*--------------------------------------------------
  Wire-O — imagem inteira (wire-o-meio-branco.png),
  esticada na altura da folha, sem corte e sem
  distorção: a largura vem da proporção do PNG
  (604 x 3546).
--------------------------------------------------*/

.product-viewer-wire {
    position: absolute;
    top: 50%;
    height: calc((100% - 48px) * 0.9);
    aspect-ratio: 604 / 3546;
    width: auto;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%) scaleX(0.85);
    pointer-events: none;
    background: url("/imagens/wire-o-meio-branco.png") center / 100% 100% no-repeat;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45));
}

/*--------------------------------------------------
  Variante "compacta" — usada pela prévia pública do
  produto na Loja (ProdutoAmostraPublicaViewer.js). Wire-O
  menor, pra não dominar visualmente uma tela de produto;
  não afeta o Visualizar normal do Studio (classe só é
  adicionada quando opcoes.compacto é passado).
--------------------------------------------------*/

.product-viewer-compacto .product-viewer-wire {
    height: calc((100% - 48px) * 0.55);
}

.product-viewer-loading {
    color: #fff;
    text-align: center;
    font-size: 14px;
}

.product-viewer-loading-bar {
    width: 240px;
    height: 6px;
    background: rgba(255, 255, 255, .2);
    border-radius: 3px;
    margin: 12px auto 0;
    overflow: hidden;
}

.product-viewer-loading-bar-fill {
    height: 100%;
    background: var(--color-primary, #6d28d9);
    width: 0%;
    transition: width .15s ease-out;
}

/* ==========================================================
   "TODAS AS PÁGINAS" — grade de miniaturas, reaproveitando
   as imagens já geradas pelo flip.
========================================================== */

.product-viewer-all-pages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 16px;
    align-content: start;
}

.product-viewer-all-pages-item {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.product-viewer-all-pages-item img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: #fff;
    border-radius: 4px;
    border: 2px solid rgba(255, 255, 255, .15);
    transition: border-color .15s ease-out;
}

.product-viewer-all-pages-item:hover img {
    border-color: var(--color-primary, #6d28d9);
}

.product-viewer-all-pages-item span {
    font-size: 12px;
    opacity: .8;
}

.product-viewer-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 16px;
    color: #fff;
    font-size: 13px;
}