/* =========================================================================
 * 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) */