/* Buttons - Global */
.button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: var(--spacing-sm);
	font-family: var(--font-heading-normal);
	cursor: pointer;
	text-decoration: none;
	transition: all 0.2s;
	border: none;
	border-radius: var(--border-radius-md);
	padding: var(--spacing-md) var(--spacing-lg);
	background-color: var(--color-primary);
	font-size: var(--font-size-md);
	line-height: 1;
	white-space: nowrap;
}

.button.primary {
	color: var(--color-primary-dark);
	background-color: var(--color-primary-light);
}

.button.primary:hover {
	color: var(--color-text-inverse);
	background-color: var(--color-primary-medium);
}

.button.secondary {
	color: var(--color-accent-blue-700);
	background-color: var(--color-info-light);
}

.button.secondary:hover {
	color: var(--color-text-inverse);
	background-color: var(--color-info-dark);
}

.button.tertiary {
	color: var(--color-text);
	background-color: var(--color-tertiary-light);
}

.button.tertiary:hover {
	background-color: var(--color-tertiary-medium);
}

.button:active, 
.button.secondary:active, 
.button.tertiary:active, 
.button.primary:active {
	transform: translateY(2px);
	transition: none;
}

/* Button disabled state */
.button:disabled,
.button.primary:disabled,
.button.secondary:disabled,
.button.tertiary:disabled {
    opacity: 0.5 !important;
    background-color: var(--color-background-muted) !important;
    color: var(--color-text-muted) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    border-color: var(--color-border) !important;
}

/* Loading state (actively processing) - keep button visible */
.button:disabled .loading-spinner,
.button.primary:disabled .loading-spinner,
.button.secondary:disabled .loading-spinner {
    /* Spinner visibility handled by loading-spinner.css */
}

/* When button has loading spinner, keep it visible with original styling */
.button.primary:disabled:has(.loading-spinner) {
    opacity: 0.9 !important;
    background-color: var(--color-primary) !important;
    color: white !important;
}

.button.secondary:disabled:has(.loading-spinner) {
    opacity: 0.9 !important;
    background-color: white !important;
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* Button variations */
.button.large {
	padding: var(--spacing-lg) var(--spacing-3xl);
	font-size: var(--font-size-lg);
}

/* Icon-only buttons (circular, matches button height) */
.button.icon-only {
	padding: 0;
	min-width: unset;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.button.icon-only i {
	margin: 0;
	font-size: var(--font-size-md);
}

.button.small {
	padding: var(--spacing-xs) var(--spacing-md);
	font-size: var(--font-size-sm);
	text-transform: uppercase;
	border-radius: var(--border-radius-sm);
	letter-spacing: 0.05em;
}

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

/* Outline button - hollow with border */
.button.outline {
	background-color: transparent;
	border: 2px solid var(--color-border);
	color: var(--color-text);
}

.button.outline:hover {
	background-color: var(--color-background-muted);
	border-color: var(--color-text-muted);
}

/* Danger/Destructive button - for delete actions */
.button.danger,
.button.destructive {
	background-color: var(--color-danger-light);
	color: var(--color-danger-dark);
}

.button.danger:hover,
.button.destructive:hover {
	background-color: var(--color-danger);
	color: var(--color-text-inverse);
	border-color: var(--color-danger-dark);
}

/* Button groups */
.cta-buttons {
	display: flex;
	gap: var(--spacing-md);
}

@media (max-width: 768px) {
	.cta-buttons, .cta {
		flex-direction: column;
		align-self: stretch;
	}

	.button {
		width: 100%;
	}

}