/* =========================================================================
 * lightbox-pswp.css — Skin do PhotoSwipe para a galeria "Seleção NOVO"
 * Tema claro (padrão) e escuro (body.theme-dark), botões Phosphor,
 * barra inferior (Comentar / Selecionar / Capa) e ajustes de z-index para
 * que os modais/painel de comentário fiquem acima do PhotoSwipe.
 * Carregar DEPOIS de photoswipe.css.
 * ========================================================================= */

/* ---- Tema (variáveis do PhotoSwipe) ---- */
.pswp {
  --pswp-bg: #ffffff;                 /* fundo claro (padrão da galeria) */
  /* O padrão da lib pro placeholder (caixa mostrada enquanto a foto do
     slide ainda não carregou, ex.: ao pular pra uma foto distante ou dar
     swipe rápido antes do preload terminar) é #222 (cinza escuro) — não
     acompanhava o --pswp-bg branco daqui. Resultado: um flash de caixa
     cinza escura por cima do fundo branco toda vez que uma foto ainda
     não tinha carregado — a "piscada" no lightbox, mais comum numa
     galeria grande com bastante swipe. Igualando ao --pswp-bg, o
     placeholder fica invisível (mesma cor do fundo) em vez de piscar. */
  --pswp-placeholder-bg: #ffffff;
  --pswp-icon-color: #000000;
  --pswp-icon-color-secondary: #ffffff;
  --pswp-icon-stroke-color: #ffffff;
  --pswp-icon-stroke-width: 1px;
}
body.theme-dark .pswp {
  --pswp-bg: #000000;
  --pswp-placeholder-bg: #000000;
  --pswp-icon-color: #ffffff;
  --pswp-icon-color-secondary: #000000;
  --pswp-icon-stroke-color: #000000;
}

/* Esconde o contador nativo (usamos só o nome do arquivo) */
.pswp__counter { display: none !important; }

/* ---- Nome do arquivo (topo-esquerda) ---- */
/* display:block (em vez do display:flex original) porque text-overflow:
   ellipsis não tem efeito em containers flex — sem isso, nomes cortados
   ficavam sem o "..." indicando que havia mais texto. line-height igual
   à altura da barra centraliza verticalmente sem precisar de flex. */
.pswp__lb-filename {
  display: block;
  height: 60px;
  line-height: 60px;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #000000;
  max-width: 55vw;
  padding: 0 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
body.theme-dark .pswp__lb-filename { color: #ffffff; }

/* ---- Botões Phosphor na barra superior ---- */
.pswp__button.pswp__lb-btn {
  width: 50px;
  height: 60px;
}
.pswp__button.pswp__lb-btn i {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  color: #000000;
}
body.theme-dark .pswp__button.pswp__lb-btn i { color: #ffffff; }

/* ---- Ícones Phosphor finos nos botões NATIVOS (fechar/zoom/setas) ---- */
.pswp__button--close i,
.pswp__button--zoom i,
.pswp__button--arrow i {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--pswp-icon-color);
}
.pswp__button--close i,
.pswp__button--zoom i { font-size: 26px; }
.pswp__button--arrow i { font-size: 42px; }

/* Fix 14/set/2026: no mobile, o long-press pra salvar a foto (menu nativo
   "Salvar imagem") faz o navegador disparar um evento de mouse sintético
   ao soltar o dedo. O PhotoSwipe interpreta isso como "mouse detectado"
   (mouseDetected() em photoswipe.umd.min.js) e adiciona a classe
   .pswp--has_mouse pro elemento inteiro, que nunca sai até fechar o
   lightbox — e a regra padrão dele, ".pswp--has_mouse .pswp__button--arrow
   { visibility: visible }", tem a MESMA especificidade que
   ".pswp--touch .pswp__button--arrow { visibility: hidden }", então quem
   vence é só quem carrega por último no CSS (o has_mouse) — por isso as
   setas reapareciam depois de salvar. Aqui a especificidade é maior (3
   classes em vez de 2), então esta regra sempre vence nos dois casos ao
   mesmo tempo (dispositivo touch mesmo com mouse "detectado" por engano). */
.pswp--touch.pswp--has_mouse .pswp__button--arrow {
  visibility: hidden;
}

/* Zoom: alterna lupa-mais / lupa-menos conforme o estado */
.pswp .lb-zoom-out { display: none; }
.pswp--zoomed-in .lb-zoom-in { display: none; }
.pswp--zoomed-in .lb-zoom-out { display: flex; }

/* ---- Barra inferior (Comentar / Selecionar / Capa) ---- */
.pswp .pswp__lb-bottombar {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 15px 20px calc(15px + env(safe-area-inset-bottom, 0px)) 20px;
  pointer-events: none;                /* barra transparente aos cliques; só os botões clicam */
}
.pswp__lb-bottombar > * { pointer-events: auto; }

.pswp__lb-textbtn {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #000000;
  background: transparent;
  border: none;
  transition: opacity 0.2s;
  user-select: none;
}
.pswp__lb-textbtn i { font-size: 20px; line-height: 1; }
.pswp__lb-textbtn:hover { opacity: 0.7; }
body.theme-dark .pswp__lb-textbtn { color: #ffffff; }
.pswp__lb-capa { color: #475569; }
body.theme-dark .pswp__lb-capa { color: #cbd5e1; }

/* Em telas pequenas, texto um pouco menor */
@media (max-width: 600px) {
  .pswp .pswp__lb-bottombar {
    gap: 24px;
    /* Mais respiro até a borda de baixo da tela — estava colado.
       Precisa do seletor completo ".pswp .pswp__lb-bottombar" (igual à
       regra base) pra ganhar em especificidade — só ".pswp__lb-bottombar"
       perdia pro "padding" shorthand da regra base, então não tinha
       efeito nenhum. */
    padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px));
  }
  .pswp__lb-textbtn { font-size: 14px; gap: 6px; }

  /* Ícones da barra de cima (compartilhar/baixar/zoom/fechar) e o
     preloader nativo (que reserva espaço mesmo invisível — ver
     photoswipe.css) menores, pra sobrar espaço de verdade pro nome do
     arquivo e reduzir a necessidade de cortar com reticências. */
  .pswp__preloader { width: 36px; }
  .pswp__preloader .pswp__icn { left: 2px; }
  .pswp__top-bar .pswp__button {
    width: 38px;
    /* Sem isso, o .pswp__button nativo do PhotoSwipe fica em opacity:0.85
       por padrão (só 100% no hover/click) — deixava os ícones de cima
       com traço mais fraco/fino que o Comentar/Selecionar (que não tem
       essa classe e já renderiza em opacidade cheia). */
    opacity: 1;
  }
  .pswp__button.pswp__lb-btn i { font-size: 20px; }
  .pswp__button--close i,
  .pswp__button--zoom i { font-size: 20px; }

  .pswp__lb-filename {
    box-sizing: border-box;
    max-width: 46vw;
    font-size: 10px;
    padding: 0 10px;
  }
}

/* ---- Painel de comentário e modais ACIMA do PhotoSwipe (z 100000) ---- */
#comment-panel {
  position: fixed !important;
  z-index: 100011 !important;
}
#modal-compartilhar { z-index: 100011 !important; }
/* #modal-salvar-mobile já usa z-index 999999 (acima do PhotoSwipe) */

/* Barra inferior (contagem de fotos / preço / Finalizar Seleção, e desde
   20/set/2026 também "Comentar"/"Selecionar" no desktop) dentro do
   lightbox -- pedido do cliente ("dá pra deixar a barra de contagem
   dentro do lightbox tb?"). Sem isso ela ficava OCULTA atrás do
   PhotoSwipe (que cobre a tela toda com z-index 100000) sempre que uma
   foto era aberta -- o elemento continuava lá, só invisível.

   Usa body.pswp-ativo (classe própria, ligada/desligada por JS em
   openLightboxPswp()/lightbox.on('close',...)) -- NÃO a classe nativa
   `.pswp--open` do PhotoSwipe: já confirmado em teste isolado (ver
   comentário em openLightboxPswp, próximo a `window._pswpFotoAberta`)
   que ela fica PRESA no DOM depois de fechar e nunca é removida, então
   um seletor `body:has(.pswp--open)` ficaria travado como "verdadeiro"
   para sempre depois da 1ª foto aberta na visita -- exatamente o motivo
   de já existir `window._pswpFotoAberta` em vez de confiar nessa classe.
   `body.pswp-ativo` é o equivalente em CSS desse mesmo flag confiável.

   Fora do lightbox a barra mantém o z-index normal (1000, definido em
   style.css), senão ficaria por cima dos modais comuns da página
   (Finalizar/Resumo/Fotos Extras, z-index 9999) o tempo todo, o que
   nunca foi o comportamento pedido. Os 3 modais que a barra pode abrir
   também precisam subir junto nesse mesmo estado, senão ficariam
   invisíveis atrás do PhotoSwipe ao serem abertos de dentro do
   lightbox. */
body.pswp-ativo .selection-bar {
  z-index: 100011 !important;
  /* Força a barra visível mesmo com 0 fotos selecionadas/comentadas (ela
     normalmente só aparece com .visible, ligada por JS quando total>0 ||
     tem comentário || finalizada) -- senão "Selecionar"/"Comentar", que
     agora moram dentro dela, ficariam inacessíveis na 1ª foto, antes de
     qualquer seleção existir. 20/set/2026. */
  transform: translateY(0) !important;
}
body.pswp-ativo #modal-finalizar,
body.pswp-ativo #modal-resumo-cliente,
body.pswp-ativo #modal-fotos-extras {
  z-index: 100012 !important;
}

/* "Comentar"/"Selecionar": versão desktop dentro da .selection-bar (ver
   .lightbox-inline-actions em style.css) e versão mobile no "quadro"
   flutuante #lightbox-mobile-actions (mesmo estilo do
   #scroll-mobile-actions -- ícone + legenda) -- ambas só aparecem com
   body.pswp-ativo. No mobile a barra some (na prática, ver acima, ela
   agora fica sempre visível), então o quadro precisa ficar "levantado"
   (bottom:85px, mesmo valor de .scroll-top-btn.lifted) pra não sobrepor
   ela. 20/set/2026. */
body.pswp-ativo .lightbox-inline-actions {
  display: flex;
}
@media (max-width: 850px) {
  body.pswp-ativo #lightbox-mobile-actions {
    display: flex;
    bottom: 85px;
    /* Sem isso ficava com o z-index base de .scroll-top-btn (998) --
       bem abaixo do PhotoSwipe (100000) -- e ficaria invisivel atras
       do overlay, mesmo com display:flex. Mesmo nivel da .selection-bar
       (100011) que agora fica sempre visivel junto. 20/set/2026. */
    z-index: 100011;
    /* .scroll-top-btn nasce com opacity:0/visibility:hidden por padrao
       (so fica visivel com a classe .show, ligada por JS no scroll) --
       este quadro nunca ganha essa classe (nao depende de scroll, so do
       lightbox estar aberto), entao precisa forcar aqui, senao ficaria
       com display:flex mas invisivel mesmo assim. 20/set/2026. */
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }
}