/**
 * ShopTop Design System — Botões
 * ------------------------------------------------------------------
 * Componente de botão reutilizável em toda a loja.
 *
 * Classe base: .shoptop-btn
 * Variantes:   .shoptop-btn--primary   (ações da ShopTop)
 *              .shoptop-btn--secondary (ações neutras)
 *              .shoptop-btn--partner   (produtos de parceiro/marketplace)
 *              .shoptop-btn--affiliate (produtos de afiliado)
 *              .shoptop-btn--danger    (ações destrutivas)
 * Tamanhos:    .shoptop-btn--sm / (padrão) / .shoptop-btn--lg
 *
 * A separação entre --primary, --partner e --affiliate é proposital:
 * o cliente precisa reconhecer visualmente, antes de clicar, se vai
 * comprar na ShopTop ou sair para um parceiro/afiliado.
 *
 * Depende de: tokens.css, variables.css
 */

.shoptop-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--shoptop-space-1);
	font-family: var(--shoptop-font-family-base);
	font-size: var(--shoptop-font-size-sm);
	font-weight: var(--shoptop-font-weight-semibold);
	line-height: 1;
	min-height: 44px;
	padding: var(--shoptop-space-2) var(--shoptop-space-3);
	border-radius: var(--shoptop-radius-sm);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

/* Só translateY no hover/active — nunca padding/largura, para o botão
 * não "saltar" de tamanho. */
.shoptop-btn:hover {
	transform: translateY(-1px);
}

.shoptop-btn:active {
	transform: translateY(0);
}

.shoptop-btn:focus-visible {
	outline: 2px solid var(--shoptop-color-primary-500);
	outline-offset: 2px;
}

/* Verdadeiramente não-interativo quando é um <button disabled> nativo.
 * Para <a aria-disabled="true"> (ex.: link de WhatsApp sem número
 * configurado), o navegador não bloqueia o clique nativamente — é uma
 * limitação conhecida de botões baseados em link, documentada em
 * docs/HOME.md. */
.shoptop-btn:disabled,
.shoptop-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/* Estado de carregamento — preparado para uso futuro (nenhum JS liga
 * esta classe ainda nesta sprint). */
.shoptop-btn--loading {
	position: relative;
	color: transparent;
	pointer-events: none;
}

.shoptop-btn--loading::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	color: var(--shoptop-btn-primary-text);
	animation: shoptop-spin 0.6s linear infinite;
}

@keyframes shoptop-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Tamanhos */
.shoptop-btn--sm {
	font-size: var(--shoptop-font-size-xs);
	padding: var(--shoptop-space-1) var(--shoptop-space-2);
}

.shoptop-btn--lg {
	font-size: var(--shoptop-font-size-base);
	padding: var(--shoptop-space-3) var(--shoptop-space-4);
}

/* Primário — comprar / adicionar ao carrinho / finalizar pedido */
.shoptop-btn--primary {
	background-color: var(--shoptop-btn-primary-bg);
	color: var(--shoptop-btn-primary-text);
}

.shoptop-btn--primary:hover {
	background-color: var(--shoptop-btn-primary-bg-hover);
	box-shadow: var(--shoptop-shadow-sm);
}

/* Secundário — ações neutras (ex.: "continuar comprando") */
.shoptop-btn--secondary {
	background-color: var(--shoptop-btn-secondary-bg);
	border-color: var(--shoptop-btn-secondary-border);
	color: var(--shoptop-btn-secondary-text);
}

.shoptop-btn--secondary:hover {
	background-color: var(--shoptop-btn-secondary-bg-hover);
}

/* Parceiro/marketplace — "Acessar catálogo do parceiro" */
.shoptop-btn--partner {
	background-color: var(--shoptop-btn-partner-bg);
	color: var(--shoptop-btn-partner-text);
}

.shoptop-btn--partner:hover {
	background-color: var(--shoptop-btn-partner-bg-hover);
	box-shadow: var(--shoptop-shadow-sm);
}

/* Afiliado — "Ver oferta" (redireciona para fora da ShopTop) */
.shoptop-btn--affiliate {
	background-color: var(--shoptop-btn-affiliate-bg);
	border-color: var(--shoptop-btn-affiliate-border);
	color: var(--shoptop-btn-affiliate-text);
}

.shoptop-btn--affiliate:hover {
	background-color: var(--shoptop-btn-affiliate-bg-hover);
}

/* Perigo — cancelar pedido, remover item do carrinho */
.shoptop-btn--danger {
	background-color: var(--shoptop-btn-danger-bg);
	color: var(--shoptop-btn-danger-text);
}

.shoptop-btn--danger:hover {
	background-color: var(--shoptop-btn-danger-bg-hover);
}