/*
 * Chamadas para instalar o app (inc/ctas-app.php): faixa do celular,
 * painel por intenção e CTA de fim de conteúdo com QR no desktop.
 * Mobile-first; só tokens de interface — as cores litúrgicas (--lit-*)
 * não entram aqui.
 */

/* ---------- Botão (selo oficial da Play Store) ---------- */

.cta-app__botao {
	display: inline-flex;
	align-items: center;
	border-radius: var(--raio-s);
	line-height: 0;
}

.cta-app__botao:focus-visible {
	outline: 2px solid var(--acento);
	outline-offset: 3px;
}

.cta-app__selo {
	display: block;
	width: auto;
	height: 40px;
}

/* ---------- Faixa do celular ----------
 * Fixa no topo; o JS põe .tem-cta-app-faixa no <body> para reservar a
 * altura e nada ficar por baixo dela. A altura é fixa
 * (--cta-app-faixa-altura, em tokens.css) e a mesma nos dois lados da
 * conta, para o conteúdo não pular 1px quando o selo ou o texto mudam de
 * tamanho. Acima de 860px ela não existe. */

.cta-app-banner {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 760;
	display: flex;
	align-items: center;
	gap: var(--esp-2);
	height: calc(var(--cta-app-faixa-altura) + env(safe-area-inset-top, 0px));
	padding: 0 var(--esp-3);
	padding-top: env(safe-area-inset-top, 0px);
	overflow: hidden;
	background: var(--superficie);
	border-bottom: 1px solid var(--borda-forte);
	box-shadow: var(--sombra);
	font-family: var(--f-ui);
}

.cta-app-banner[hidden] {
	display: none;
}

.cta-app-banner__texto {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.cta-app-banner__titulo,
.cta-app-banner__descricao {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cta-app-banner__titulo {
	color: var(--texto);
	font-size: var(--fs-ui);
	font-weight: 600;
	line-height: 1.2;
}

.cta-app-banner__descricao {
	color: var(--texto-2);
	font-size: var(--fs-legenda);
	line-height: 1.2;
}

.cta-app-banner__botao {
	flex: 0 0 auto;
}

.cta-app-banner__botao .cta-app__selo {
	height: 36px;
}

.cta-app-banner__fechar {
	flex: 0 0 auto;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--raio-pill);
	background: none;
	color: var(--texto-2);
	font: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.cta-app-banner__fechar:hover,
.cta-app-banner__fechar:focus-visible {
	color: var(--texto);
}

@media (min-width: 860px) {
	.cta-app-banner {
		display: none;
	}
}

@media (max-width: 859px) {
	body.tem-cta-app-faixa {
		padding-top: calc(var(--cta-app-faixa-altura) + env(safe-area-inset-top, 0px));
	}

	/* O "Pular para o conteúdo" (layout.css) entra fixo no topo: com a faixa
	 * no ar, ele desce para baixo dela (sobre o cabeçalho, como já fazia),
	 * em vez de ficar escondido atrás. */
	body.tem-cta-app-faixa .pular-para-conteudo:focus {
		top: calc(var(--cta-app-faixa-altura) + env(safe-area-inset-top, 0px));
	}
}

/* ---------- Painel por intenção ----------
 * Cartão pequeno no canto, sem fundo escurecido, sem prender foco e sem
 * bloquear a rolagem. No celular fica acima da tab bar; no desktop, no
 * canto inferior direito. */

.cta-app-painel {
	position: fixed;
	left: var(--esp-3);
	right: var(--esp-3);
	bottom: calc(64px + var(--esp-2) + env(safe-area-inset-bottom, 0px));
	z-index: 780;
	max-width: 22rem;
	margin-inline: auto;
	padding: var(--esp-4);
	background: var(--superficie);
	color: var(--texto);
	border: 1px solid var(--borda-forte);
	border-radius: var(--raio-m);
	box-shadow: var(--sombra);
	font-family: var(--f-ui);
	animation: cta-app-painel-entra 180ms ease-out;
}

.cta-app-painel[hidden] {
	display: none;
}

@keyframes cta-app-painel-entra {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.cta-app-painel__fechar {
	position: absolute;
	top: var(--esp-1);
	right: var(--esp-1);
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--raio-pill);
	background: none;
	color: var(--texto-2);
	font: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.cta-app-painel__fechar:hover,
.cta-app-painel__fechar:focus-visible {
	color: var(--texto);
}

.cta-app-painel__titulo {
	margin: 0 var(--esp-8) var(--esp-2) 0;
	font-size: var(--fs-ui);
}

.cta-app-painel__texto {
	margin: 0 0 var(--esp-3);
	color: var(--texto-2);
	font-size: var(--fs-legenda);
}

@media (min-width: 860px) {
	.cta-app-painel {
		left: auto;
		right: var(--esp-4);
		bottom: var(--esp-4);
		margin-inline: 0;
	}
}

/* ---------- Fim do conteúdo ---------- */

.cta-app-fim {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--esp-4);
	margin-block: var(--esp-8);
	padding: var(--esp-5);
	background: var(--superficie-2);
	border: 1px solid var(--borda);
	border-radius: var(--raio-m);
	font-family: var(--f-ui);
}

.cta-app-fim__texto {
	flex: 1 1 16rem;
	min-width: 0;
}

.cta-app-fim__titulo {
	margin: 0 0 var(--esp-2);
	font-size: var(--fs-h3);
}

.cta-app-fim__descricao {
	margin: 0 0 var(--esp-3);
	color: var(--texto-2);
	font-size: var(--fs-legenda);
}

/* Só aparece depois que o JS desenhou o SVG (.tem-qr) e só no desktop:
 * no celular o botão da loja já resolve. */
.cta-app-fim__qr {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: var(--esp-1);
}

@media (min-width: 860px) {
	.cta-app-fim__qr.tem-qr {
		display: flex;
	}
}

.cta-app-fim__qr-link {
	display: block;
	padding: var(--esp-2);
	background: var(--neutro-0);
	border: 1px solid var(--borda-forte);
	border-radius: var(--raio-s);
}

.cta-app-fim__qr-link svg {
	display: block;
	width: 120px;
	height: 120px;
}

.cta-app-fim__qr-legenda {
	margin: 0;
	max-width: 12rem;
	color: var(--texto-2);
	font-size: var(--fs-legenda);
	text-align: center;
}