/*!
 * CzarCommerce Buttons — FASE 12.3
 * -----------------------------------------------------------------------------
 * Componente botão próprio. Opt-in por classe `.czar-button`. Variants por
 * modifier `.czar-button--{primary,secondary,outline,ghost,accent}`,
 * tamanhos `.czar-button--{sm,lg}`, modificadores `.czar-button--{pill,block}`.
 *
 * Consome tokens da 12.1 (cor, raio, sombra, espaço) e a tipografia da 12.2.
 * Coexiste com `.wp-block-button` / `.wd-button` — só age onde a classe
 * `czar-button` é declarada no template.
 *
 * Acessibilidade:
 *   - foco visível via :focus-visible (sem mexer no outline do :focus mouse)
 *   - aria-busy="true" ativa estado loading com spinner
 *   - estado disabled respeita prefers-reduced-motion
 */

.czar-button {
	--_bg:      var(--czar-color-primary);
	--_fg:      var(--czar-color-surface, #fff);
	--_border:  transparent;
	--_radius:  var(--czar-button-radius, var(--czar-radius-full));
	--_pad-y:   var(--czar-space-3);
	--_pad-x:   var(--czar-space-5);
	--_size:    var(--czar-font-size-md);
	--_weight:  var(--czar-font-weight-semibold, 600);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--czar-space-2);

	font-family: var(--czar-font-family-base);
	font-size: var(--_size);
	font-weight: var(--_weight);
	line-height: var(--czar-line-height-tight);
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;

	padding: var(--_pad-y) var(--_pad-x);
	border: 1.5px solid var(--_border);
	border-radius: var(--_radius);
	background-color: var(--_bg);
	color: var(--_fg);
	box-shadow: var(--czar-shadow-sm);

	cursor: pointer;
	transition:
		background-color 0.18s ease,
		color 0.18s ease,
		border-color 0.18s ease,
		box-shadow 0.18s ease,
		transform 0.12s ease;
	-webkit-appearance: none;
	appearance: none;
}

.czar-button:hover {
	background-color: color-mix(in srgb, var(--_bg) 88%, #000);
	box-shadow: var(--czar-shadow-md);
}

.czar-button:active {
	transform: translateY(1px);
	box-shadow: var(--czar-shadow-sm);
}

.czar-button:focus-visible {
	outline: 2px solid var(--czar-color-accent);
	outline-offset: 2px;
}

.czar-button[disabled],
.czar-button[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

/* ---- Variants ---- */

.czar-button--primary {
	--_bg: var(--czar-color-primary);
	--_fg: var(--czar-color-surface, #fff);
}

.czar-button--secondary {
	--_bg: var(--czar-color-secondary);
	--_fg: var(--czar-color-surface, #fff);
}

.czar-button--accent {
	--_bg: var(--czar-color-accent);
	--_fg: var(--czar-color-surface, #fff);
}

.czar-button--outline {
	--_bg: transparent;
	--_fg: var(--czar-color-primary);
	--_border: var(--czar-color-primary);
	box-shadow: none;
}
.czar-button--outline:hover {
	background-color: var(--czar-color-primary);
	color: var(--czar-color-surface, #fff);
}

.czar-button--ghost {
	--_bg: transparent;
	--_fg: var(--czar-color-text);
	--_border: transparent;
	box-shadow: none;
}
.czar-button--ghost:hover {
	background-color: color-mix(in srgb, var(--czar-color-text) 8%, transparent);
}

/* ---- Tamanhos ---- */

.czar-button--sm {
	--_size:  var(--czar-font-size-sm);
	--_pad-y: var(--czar-space-2);
	--_pad-x: var(--czar-space-4);
}

.czar-button--lg {
	--_size:  var(--czar-font-size-lg);
	--_pad-y: var(--czar-space-4);
	--_pad-x: var(--czar-space-8);
}

/* ---- Modificadores ---- */

.czar-button--pill {
	--_radius: var(--czar-radius-full);
}

.czar-button--block {
	display: flex;
	width: 100%;
}

/* ---- Estado loading (aria-busy) ----
   Botão troca conteúdo por spinner sem reflow. Spinner CSS puro,
   sem dep de gif/svg externo. */

.czar-button[aria-busy="true"] {
	color: transparent;
	pointer-events: none;
	position: relative;
}

.czar-button[aria-busy="true"]::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1.1em;
	height: 1.1em;
	border: 2px solid color-mix(in srgb, var(--_fg) 35%, transparent);
	border-top-color: var(--_fg);
	border-radius: 50%;
	animation: czar-button-spin 0.7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
	.czar-button {
		transition: none;
	}
	.czar-button[aria-busy="true"]::after {
		animation: none;
	}
}

/* ---- Grupo de botões ----
   Combinador para botões adjacentes em hero/CTA. */

.czar-button-group {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--czar-space-3);
	align-items: center;
}