/* Estilos compartilhados por todas as páginas do ClicBook */
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { 
    font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; 
    background-color: #0a0a0a; 
    color: #f3f4f6; 
    animation: fadeIn 0.8s ease-in-out; 
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

::selection { background-color: #b3152a; color: #fff; }

/* Scrollbar personalizada para um visual premium */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 5px; border: 2px solid #0a0a0a; }
::-webkit-scrollbar-thumb:hover { background: #ef4458; }

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.masonry-item { break-inside: avoid; margin-bottom: 1rem; }
:focus-visible { outline: 2px solid #ef4458; outline-offset: 2px; }

/* ---------------------------------------------------- */
/* ANIMAÇÃO BIDIRECIONAL PARA O FAQ (ABRIR E FECHAR)    */
/* ---------------------------------------------------- */
details.group .faq-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
}

details.group .faq-content-inner {
    overflow: hidden;
}

/* O segredo para a animação de subida funcionar sem travar */
details.group[open]:not(.closing) .faq-content {
    grid-template-rows: 1fr;
}

/* Rotação suave da setinha */
details.group .ph-caret-down {
    transition: transform 0.3s ease;
}
details.group[open]:not(.closing) .ph-caret-down {
    transform: rotate(-180deg);
}
/* ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------- */
/* MODO CLARO DO PAINEL ADMIN (tema.js põe "tema-claro" no <html>)                       */
/* As páginas usam classes escuras do Tailwind; aqui elas são trocadas por versões claras */
/* só no conteúdo e nas janelas. O menu lateral e o topo do celular continuam escuros     */
/* (é onde fica o logo, que é claro).                                                     */
/* ---------------------------------------------------- */
html.tema-claro body.bg-darkBg { background-color: #f4f4f5; color: #111827; }
html.tema-claro ::-webkit-scrollbar-track { background: #f4f4f5; }
html.tema-claro ::-webkit-scrollbar-thumb { background: #c4c4c8; border-color: #f4f4f5; }

html.tema-claro :is(main > div, body > .fixed:not(#admin-drawer):not(#toast):not(.sempre-escuro)) {
    & .bg-cardBg { background-color: #ffffff; }
    & .bg-darkBg { background-color: #f4f4f5; }
    & .bg-darkBg\/40 { background-color: rgb(244 244 245 / .7); }
    & .bg-darkBg\/50, & .bg-darkBg\/60 { background-color: rgb(244 244 245 / .85); }
    & .bg-darkBg\/80 { background-color: rgb(244 244 245 / .95); }

    & .text-white:not([class*="bg-brandRed"]):not([class*="bg-black"]):not([class*="bg-emerald-6"]) { color: #111827; }
    /* Texto sobre a faixa escura das fotos (ex.: nome do arquivo) continua branco, como no modo escuro.
       !important porque a regra geral de .text-white acima é mais específica. */
    & [class*="from-black"] .text-white { color: #ffffff !important; }
    & .hover\:text-white:hover:not([class*="bg-brandRed"]) { color: #111827; }
    & .text-gray-100, & .text-gray-200 { color: #1f2937; }
    & .text-gray-300 { color: #374151; }
    & .text-gray-400 { color: #4b5563; }
    & .text-gray-500 { color: #6b7280; }
    & .text-gray-600 { color: #9ca3af; }

    & .border-white\/5 { border-color: rgb(0 0 0 / .08); }
    & .border-white\/10 { border-color: rgb(0 0 0 / .12); }
    & .border-white\/15 { border-color: rgb(0 0 0 / .16); }
    & .border-white\/20 { border-color: rgb(0 0 0 / .2); }
    & .divide-white\/5 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(0 0 0 / .08); }

    & .bg-white\/5 { background-color: rgb(0 0 0 / .04); }
    & .bg-white\/10 { background-color: rgb(0 0 0 / .07); }
    & .bg-white\/20 { background-color: rgb(0 0 0 / .12); }
    & .hover\:bg-white\/5:hover { background-color: rgb(0 0 0 / .05); }
    & .hover\:bg-white\/10:hover { background-color: rgb(0 0 0 / .08); }

    /* Cores de destaque mais escuras, para ler bem no fundo claro */
    & .text-brandText { color: #b3152a; }
    & .text-emerald-400 { color: #047857; }
    & .text-amber-200 { color: #92400e; }
    & .text-amber-300, & .text-amber-400 { color: #b45309; }
    & .text-purple-400 { color: #7e22ce; }
    /* Fundos e bordas dos avisos coloridos: mais marcados, para não sumirem no fundo claro */
    & .bg-amber-400\/10 { background-color: rgb(245 158 11 / .12); }
    & .border-amber-400\/20 { border-color: rgb(217 119 6 / .35); }
    & .bg-red-500\/10 { background-color: rgb(239 68 68 / .08); }
    & .border-red-500\/20, & .border-red-500\/30 { border-color: rgb(220 38 38 / .3); }
    & .bg-emerald-400\/10, & .bg-emerald-500\/10 { background-color: rgb(16 185 129 / .1); }
    & .border-emerald-400\/20, & .border-emerald-400\/30 { border-color: rgb(5 150 105 / .35); }
    & .text-red-300 { color: #b91c1c; }
    & .text-blue-400 { color: #1d4ed8; }
}

/* Marca do ClicBook no rodapé ("... via" + ícone da câmera + nome + ®): leve brilho ao passar o mouse ou tocar no
   celular; a câmera gira um pouco. O mesmo desenho do rodapé das páginas dos estúdios (pagina-estudio.css). */
.marca-rodape-logo { display: inline-flex; align-items: center; gap: 7px; }
.marca-rodape-icone { height: 26px; width: auto; }
.marca-rodape-icone-peq { height: 22px; } /* no menu do painel do estúdio ("Gerenciado via") */
.marca-registrada { align-self: flex-start; margin: -2px 0 0 -6px; font-size: .62rem; font-weight: 600; line-height: 1; color: rgb(156 163 175); }
.marca-rodape img {
    transition: filter .35s ease, transform .35s ease;
}
.marca-rodape:hover img,
.marca-rodape:focus-visible img,
.marca-rodape:active img {
    filter: brightness(1.2) drop-shadow(0 0 6px rgb(239 68 68 / .55)) drop-shadow(0 0 2px rgb(255 255 255 / .35));
    transform: scale(1.05);
}
.marca-rodape:hover .marca-rodape-icone,
.marca-rodape:focus-visible .marca-rodape-icone,
.marca-rodape:active .marca-rodape-icone { transform: scale(1.05) rotate(-4deg); }

/* Seleção de fotos e vídeos na tela do evento (admin-evento.js põe .midias-selecao na grade/lista e
   .midia-selecionada em cada item marcado). Igual à galeria do celular: marquinha no canto e a foto encolhe. */
.midia-marca {
    display: none; position: absolute; top: .5rem; left: .5rem; z-index: 3; pointer-events: none;
    width: 1.6rem; height: 1.6rem; border-radius: 9999px; border: 2px solid #fff;
    background: rgb(0 0 0 / .35); box-shadow: 0 1px 4px rgb(0 0 0 / .45);
    align-items: center; justify-content: center; color: #fff; font-size: .95rem;
}
.midia-foto { -webkit-touch-callout: none; } /* segurar a foto liga a seleção, sem o menu da imagem */
.midia-marca i { opacity: 0; transition: opacity .15s ease; }
.midias-selecao .midia-marca { display: flex; }
.midias-selecao .midia-selecionada .midia-marca { background: #b3152a; border-color: #fff; }
.midias-selecao .midia-selecionada .midia-marca i { opacity: 1; }
.midias-selecao { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.midias-selecao [data-id] { cursor: pointer; }
.midias-selecao img { -webkit-user-drag: none; }
.midias-selecao :is(.midia-acao-remover, .tirar-da-pessoa) { display: none !important; }
.midias-selecao .midia-selecionada { box-shadow: inset 0 0 0 3px #b3152a; }
.midias-selecao .midia-foto { transition: transform .15s ease, border-radius .15s ease; }
.midias-selecao .midia-selecionada .midia-foto { transform: scale(.88); border-radius: .6rem; }
@media (prefers-reduced-motion: reduce) { .midias-selecao .midia-foto { transition: none; } }

/* Download dos originais desativado no evento: some todo botão de baixar (marcado com data-download) */
html[data-sem-download] [data-download] { display: none !important; }

/* Páginas protegidas */
html[data-guard="client"]:not([data-ok]) body,
html[data-guard="admin"]:not([data-ok]) body,
html[data-guard="plataforma"]:not([data-ok]) body,
html[data-guard="estudio"]:not([data-ok]) body { visibility: hidden; }
/* Aviso "Não há espaço para todo o envio" (admin-evento.js): desce e aparece; ao fechar, sobe e some. */
#alerta-espaco { transform: translateX(-50%); }
#alerta-espaco.alerta-entra { animation: alerta-entra .45s cubic-bezier(.2, .9, .3, 1.25) both; }
#alerta-espaco.alerta-sai { animation: alerta-sai .25s ease-in both; }
#alerta-espaco.alerta-entra .alerta-espaco-icone { animation: alerta-pulso 1.2s ease-in-out .45s 2; }
@keyframes alerta-entra { from { opacity: 0; transform: translate(-50%, -24px) scale(.94); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes alerta-sai { from { opacity: 1; transform: translate(-50%, 0) scale(1); } to { opacity: 0; transform: translate(-50%, -16px) scale(.97); } }
@keyframes alerta-pulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) {
  #alerta-espaco.alerta-entra, #alerta-espaco.alerta-sai, #alerta-espaco.alerta-entra .alerta-espaco-icone { animation-duration: .01s; animation-iteration-count: 1; }
}
/* Espaço que não cabe: caixa amarela em volta do "Falta enviar" */
#fila-espaco.fila-espaco-cheio { border-color: rgb(251 191 36); background-color: rgb(251 191 36 / .1); box-shadow: 0 0 0 3px rgb(251 191 36 / .15); }