/* Button: .c-btn + --primary | --secondary | --outline | --ghost | --icon, sizes --sm | --lg, --block.
   Also styles WP/WPJM/Woo submit buttons via .c-btn-compat (opt-in, see 08 Design System). */
.c-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
	min-height: var(--control-h); padding: 0.625rem 1.25rem;
	font-size: var(--fs-14); line-height: 1.25; font-weight: var(--fw-semibold); text-align: center; text-decoration: none; white-space: nowrap;
	color: var(--color-text); background: var(--color-surface);
	border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
	cursor: pointer; user-select: none;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.c-btn:hover { color: var(--color-text); }
.c-btn:active { transform: translateY(0) scale(0.98); }
.c-btn:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.c-btn[disabled], .c-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.c-btn .icon { width: 1.125rem; height: 1.125rem; }

.c-btn--primary { color: var(--color-on-primary); background: var(--color-primary); border-color: var(--color-primary); box-shadow: 0 1px 2px rgb(48 58 247 / 0.2); }
.c-btn--primary:hover { color: var(--color-on-primary); background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.c-btn--primary:active { background: var(--color-primary-active); }
.c-btn--secondary { background: var(--color-surface); border-color: var(--color-border-strong); }
.c-btn--secondary:hover { background: var(--pn-brand-50); border-color: var(--pn-brand-300); color: var(--pn-brand-700); }
.c-btn--outline { color: var(--color-primary); background: transparent; border-color: var(--color-primary); }
.c-btn--outline:hover { color: var(--pn-brand-700); background: var(--pn-brand-50); }
.c-btn--ghost { min-height: var(--control-h-sm); padding: 0.375rem 0.625rem; color: var(--color-primary); background: transparent; border-color: transparent; }
.c-btn--ghost:hover { color: var(--pn-brand-700); background: var(--pn-brand-50); }
.c-btn--danger { color: #fff; background: var(--color-danger); border-color: var(--color-danger); }
.c-btn--danger:hover { color: #fff; background: #a51f1f; }

.c-btn--sm { min-height: var(--control-h-sm); padding: 0.375rem 0.875rem; font-size: var(--fs-13); }
.c-btn--lg { min-height: 52px; padding: 0.875rem 1.75rem; font-size: var(--fs-16); }
.c-btn--block { display: flex; width: 100%; }
.c-btn--pill { border-radius: var(--radius-pill); }
.c-btn--icon { width: var(--control-h); padding: 0; flex: none; }
.c-btn--icon.c-btn--sm { width: var(--control-h-sm); }
.c-btn[aria-pressed="true"] { color: var(--pn-brand-700); background: var(--pn-brand-50); border-color: var(--pn-brand-300); }
.c-btn[aria-pressed="true"] .icon { fill: currentColor; }

@media (hover: hover) {
	.c-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgb(48 58 247 / 0.25); }
	.c-btn .icon:last-child:not(:first-child) { transition: transform var(--dur) var(--ease); }
	.c-btn:hover .icon:last-child:not(:first-child) { transform: translateX(2px); }
}