/* Visualizador na pagina do produto.
 *
 * Herda cor e fonte do tema em vez de impor a identidade do Libidi: um plugin
 * que pinta a pagina do cliente com a marca de quem o fez e um plugin que o
 * cliente desinstala.
 *
 * As cores usam as variaveis do tema com um fallback neutro, entao o bloco
 * funciona tanto em tema escuro quanto claro sem configuracao. */

/* A ancora de tema pode cair fora do container do site. Esta faixa recria a
   mesma largura maxima e o mesmo respiro lateral, para o bloco alinhar com o
   resto da pagina em vez de sangrar de ponta a ponta. */
.libidiar-faixa {
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
}

.libidiar {
	max-width: 1320px;
	margin: 32px auto;
	box-sizing: border-box;
}

.libidiar__viewer {
	display: block;
	width: 100%;
	height: min(60vh, 480px);
	/* Transparente por padrao: fundo claro fixo criava uma faixa branca
	   gritante em tema escuro. */
	background: var(--surface, rgba(127, 127, 127, 0.08));
	border: 1px solid rgba(127, 127, 127, 0.22);
	border-radius: 12px;
	--poster-color: transparent;
}

/* Esconde o botao de AR nativo do model-viewer: o call-to-action e o botao
   abaixo, com texto traduzido; dois gatilhos para a mesma acao confundem. */
.libidiar__ar-slot {
	display: none;
}

.libidiar__acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 14px;
}

/* Estilo proprio em vez de depender da classe .button do tema, que pode nao
   existir ou ter outro significado. */
.libidiar__ar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 26px;
	border: 0;
	border-radius: 10px;
	background: linear-gradient(100deg, #e8368f, #a03cc8);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.2s ease;
}

.libidiar__ar:hover { filter: brightness(1.1); }
.libidiar__ar:focus-visible { outline: 2px solid #e8368f; outline-offset: 2px; }

.libidiar__medida {
	font-size: 0.92em;
	opacity: 0.75;
}

.libidiar__aviso {
	margin-top: 12px;
	font-size: 0.85em;
	opacity: 0.7;
}

@media (max-width: 600px) {
	.libidiar__viewer { height: 60vh; }
	.libidiar__ar { width: 100%; }
}


/* ---------------------------------------------- integracao com a galeria
   Quando assets/galeria.js encontra a galeria do tema, o visualizador vira uma
   camada sobre a foto principal e ganha uma miniatura "3D" ao lado das outras.
   Nesse modo a faixa perde margem e fundo: quem desenha a moldura e o tema. */
.libidiar--na-galeria,
.libidiar--na-galeria .libidiar {
	margin: 0;
	padding: 0;
	max-width: none;
}

/* A camada cobre a area da foto. O tema ja usa position:relative aqui (guarda
   setas, contador e dica em posicao absoluta), entao nao precisamos alterar. */
model-viewer.libidiar__camada {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: inherit;
	background: transparent;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

model-viewer.libidiar__camada.esta-ativo {
	opacity: 1;
	pointer-events: auto;
}

/* As acoes so aparecem com o 3D ativo: um botao de AR ao lado de uma foto
   parada confunde. */
/* As acoes sao movidas para dentro da galeria pelo JS, entao nao sao mais
   descendentes de .libidiar--na-galeria: o estado vai no proprio elemento. */
.gallery .libidiar__acoes {
	display: none;
	margin-top: 14px;
}

.gallery .libidiar__acoes.esta-ativo {
	display: flex;
}

.gallery .libidiar__aviso {
	display: none;
	margin-top: 8px;
}

.gallery .libidiar__acoes.esta-ativo ~ .libidiar__aviso[data-mostrar="1"] {
	display: block;
}

/* Miniatura "3D": herda .thumb do tema e so acrescenta o conteudo. */
.libidiar__thumb {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	cursor: pointer;
	color: inherit;
}

.libidiar__thumb svg { width: 22px; height: 22px; opacity: 0.85; }

.libidiar__thumb span {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

/* Tema nao reconhecido: o bloco fica solto na pagina e precisa da moldura. */
.libidiar--solto .libidiar__viewer {
	border: 1px solid rgba(127, 127, 127, 0.22);
	border-radius: 12px;
}