/* ===== POPUP DE IMAGEM (Slides): só a imagem no tamanho dela + botão FECHAR, na frente de tudo ===== */
.modal#slides-modal { z-index: 20000 !important; }
.modal-backdrop { z-index: 19990 !important; }
.modal-backdrop.show { opacity: .8 !important; background: #000 !important; }

/* o JS ajusta left/top/width/height para a área visível; aqui o popup é uma camada fixa que centraliza o conteúdo */
.modal#slides-modal {
    background: rgba(2, 6, 18, .78) !important;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* o fundo escuro/desfocado agora é do próprio popup (igual no PC e no celular); some o backdrop padrão */
body.gm-slides-open .modal-backdrop { display: none !important; }
.modal#slides-modal { position: fixed !important; overflow: auto !important; -webkit-overflow-scrolling: touch; }
.modal#slides-modal .modal-dialog { min-height: 100% !important; }

/* centralizado, largura = largura da imagem (máx. 780px ou 92% da tela) */
.modal#slides-modal .modal-dialog {
    width: fit-content !important; max-width: var(--gm-w, 92vw) !important;
    margin: 0 auto !important; min-height: 100%;
    display: flex !important; align-items: center;
}
.modal#slides-modal .modal-content {
    width: fit-content; max-width: var(--gm-w, 92vw); margin: 0 auto;
    background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}

/* sem título, sem X, sem bordas laterais */
.modal#slides-modal .modal-header,
.modal#slides-modal .carousel-indicators { display: none !important; }
.modal#slides-modal .modal-body { padding: 0 !important; background: transparent; }

/* o carrossel não pode esticar a caixa: só o slide ativo ocupa espaço */
.modal#slides-modal .carousel-inner { width: auto; background: transparent; overflow: hidden; border-radius: 8px; }
.modal#slides-modal .carousel-item { float: none !important; margin: 0 !important; width: auto !important; display: none !important; transition: none !important; transform: none !important; }
.modal#slides-modal .carousel-item.active { display: block !important; }

/* imagem no tamanho original; só diminui se passar de 780px de largura ou da tela */
.modal#slides-modal .carousel-item img,
.modal#slides-modal .carousel-item img.w-100 {
    width: auto !important; height: auto !important;
    max-width: var(--gm-w, min(92vw, 900px)) !important; max-height: var(--gm-h, 80vh) !important;
    margin: 0 auto; display: block;
}
.modal#slides-modal.single .carousel-control-prev,
.modal#slides-modal.single .carousel-control-next { display: none; }

/* só o botão FECHAR embaixo */
.modal#slides-modal .modal-footer {
    border: 0 !important; background: transparent !important; padding: 10px 0 0; justify-content: center;
}
.modal#slides-modal #banner-modal-links { display: none; }
.modal#slides-modal .modal-footer .btn[data-bs-dismiss="modal"] {
    min-width: 110px; padding: 6px 18px; font: 700 12px 'Inter', Arial, sans-serif; letter-spacing: .6px;
    text-transform: uppercase; color: #fff; background: rgba(10,20,45,.92); border: 1px solid #2b5cff; border-radius: 6px;
}
.modal#slides-modal .modal-footer .btn[data-bs-dismiss="modal"]:hover { background: #1f5bff; }

/* ===== CORREÇÃO MOBILE: o popup só existe enquanto está aberto (.show) ===== */
.modal#slides-modal:not(.show) { display: none !important; }
body:not(.gm-slides-open) .modal#slides-modal { display: none !important; }
body.gm-slides-open .modal#slides-modal.show { display: block !important; }

/* botão X sempre visível no canto da tela (fácil de tocar no celular) */
.gm-x {
  position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 20010;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(8, 12, 24, .88); color: #fff; font: 700 22px/1 Arial, sans-serif; cursor: pointer;
  display: none; align-items: center; justify-content: center; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
body.gm-slides-open .gm-x { display: flex; }