/**
 * Botões flutuantes do canto inferior direito (WhatsApp e cesta).
 *
 * Marcação em inc/flutuantes.php. Os dois discos são a MESMA peça: mesmo
 * tamanho, mesmo raio, mesma sombra, mesmo ícone branco — só o fundo muda.
 * Qualquer ajuste de forma vai em `.cdm-flutuante`, nunca só numa variante,
 * senão um passa a puxar mais atenção que o outro.
 */

.cdm-flutuantes {
	position: fixed;
	right: var(--cdm-e-4);
	bottom: var(--cdm-e-4);
	z-index: var(--cdm-z-overlay);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--cdm-e-3);
}

/* O invólucro do fragmento fica na página mesmo com o carrinho vazio (é onde
   o AJAX do WooCommerce encaixa o botão). Vazio, ele não pode ocupar linha
   nem consumir o gap da coluna. */
.cdm-flutuante-fragmento:empty {
	display: none;
}

.cdm-flutuante {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	color: var(--cdm-branco);
	border-radius: var(--cdm-raio-cheio);
	box-shadow: var(--cdm-sombra-lg);
	text-decoration: none;
	transition: transform var(--cdm-transicao), box-shadow var(--cdm-transicao);
}

.cdm-flutuante .cdm-icone {
	font-size: 26px;
	line-height: 1;
}

.cdm-flutuante:hover,
.cdm-flutuante:focus-visible {
	color: var(--cdm-branco);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(16, 24, 40, .22);
}

.cdm-flutuante:focus-visible {
	outline: 2px solid var(--cdm-azul);
	outline-offset: 3px;
}

.cdm-flutuante--whatsapp {
	background: var(--cdm-flutuante-whatsapp);
}

.cdm-flutuante--cesta {
	background: var(--cdm-flutuante-cesta);
}

/* Contador: disco vermelho na quina de cima, mordendo a borda do botão. O
   `min-width` com `padding` lateral mantém o círculo redondo com um dígito e
   o alonga em pílula a partir de dois, em vez de espremer o número. */
.cdm-flutuante__contador {
	position: absolute;
	top: -2px;
	right: -2px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding-inline: 6px;
	color: var(--cdm-branco);
	background: var(--cdm-vermelho);
	border: 2px solid var(--cdm-branco);
	border-radius: var(--cdm-raio-cheio);
	/* 12px, nao os 10px de antes: o peso ja era 700 e a Poppins bold estava
	   carregada, mas num corpo de 10px o negrito praticamente nao se le --
	   o cliente viu o numero como se fosse texto normal. */
	font-size: var(--cdm-t-xs);
	font-weight: var(--cdm-peso-forte);
	line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
	.cdm-flutuante {
		transition: none;
	}

	.cdm-flutuante:hover,
	.cdm-flutuante:focus-visible {
		transform: none;
	}
}

/* Com a gaveta aberta os botões saem da frente: eles são atalhos para abrir
   painéis que já estão na tela, e ficariam boiando por cima do scrim. */
.cdm-travado .cdm-flutuantes {
	display: none;
}