.mv-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--target-size);
	gap: var(--space-2);
	padding: var(--space-2) var(--space-5);
	font-size: var(--mvs-type-button);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: var(--color-surface);
	background: var(--color-primary);
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	transition:
		background-color var(--transition-fast),
		border-color var(--transition-fast),
		color var(--transition-fast),
		box-shadow var(--transition-fast),
		transform var(--transition-fast);
}

.mv-button:hover {
	color: var(--color-surface);
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
}

.mv-button:active {
	transform: translateY(1px);
}

.mv-button:focus-visible {
	outline: var(--focus-ring-width) solid var(--color-focus);
	outline-offset: var(--focus-ring-offset);
}

.mv-button[disabled],
.mv-button[aria-disabled="true"] {
	opacity: 0.55;
	pointer-events: none;
}

.mv-button--secondary {
	color: var(--color-primary);
	background: var(--color-surface);
	border-color: var(--color-border);
}

.mv-button--secondary:hover {
	color: var(--color-primary-hover);
	background: var(--color-bg);
	border-color: var(--color-primary-hover);
}

.mv-button--inverse {
	color: var(--color-surface);
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.5);
	box-shadow: none;
}

.mv-button--inverse:hover {
	color: var(--color-heading);
	background: var(--color-surface);
	border-color: var(--color-surface);
}

.mv-card {
	padding: var(--card-padding, var(--space-6));
	color: var(--color-text);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

.mv-page-title {
	font-size: var(--mvs-type-page-title);
}

.mv-section__title {
	font-size: var(--mvs-type-section-title);
}

.mv-card__title {
	font-size: var(--mvs-type-card-title);
}

.mv-price {
	display: inline-grid;
	gap: var(--space-1);
	color: var(--commerce-price-color);
	font-size: var(--mvs-type-card-title);
	font-weight: 700;
	line-height: 1.15;
}

.mv-price__vat,
.mv-vat-note {
	color: var(--commerce-vat-color);
	font-size: var(--mvs-type-meta);
	font-weight: 500;
	line-height: 1.4;
}

.mv-commerce-summary {
	padding: var(--space-6);
	color: var(--color-text);
	background: var(--commerce-summary-bg);
	border: 1px solid var(--commerce-summary-border);
	border-radius: var(--radius-md);
	box-shadow: var(--commerce-summary-shadow);
}

.mv-status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	width: fit-content;
	font-size: var(--mvs-type-meta);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
}

.mv-status::before {
	display: inline-block;
	width: 0.65rem;
	height: 0.65rem;
	content: "";
	border-radius: var(--radius-pill);
	background: currentColor;
}

.mv-status--pending {
	color: var(--commerce-status-pending-color);
}

.mv-status--paid,
.mv-status--active {
	color: var(--commerce-status-paid-color);
}

.mv-status--error,
.mv-status--revoked {
	color: var(--commerce-status-error-color);
}

.mv-badge,
.mv-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	width: fit-content;
	font-size: var(--mvs-type-meta);
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-primary);
	background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
	border: 1px solid color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
}

.mv-badge {
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-sm);
}

.mv-chip {
	min-height: 2rem;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
}

.mv-form {
	display: grid;
	gap: var(--space-4);
}

.mv-field {
	display: grid;
	gap: var(--space-2);
}

.mv-field__label {
	font-weight: 600;
	color: var(--color-heading);
}

.mv-field__help {
	font-size: var(--mvs-type-meta);
	color: var(--color-text-muted);
}

.mv-field__error {
	font-size: var(--mvs-type-meta);
	font-weight: 600;
	color: var(--color-error);
}

.mv-field :where(input, select, textarea)[aria-invalid="true"] {
	border-color: var(--color-error);
}