/** CSS-only card styling for custom markup. */

.ui-card {
	background-color: var(--ui-color-surface);
	border: 1px solid var(--ui-color-border-control);
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(40, 32, 22, 0.07);
	overflow: hidden;
}

.ui-card__header {
	padding: 15px 30px;
	border-bottom: 1px solid var(--ui-area-separator-color);
}

.ui-card__body {
	padding: 25px 30px;
	
	--ui-content-padding-left: 30px;
	--ui-content-padding-right: 30px;
	--ui-content-padding-top: 25px;
	--ui-content-padding-bottom: 25px;
}

.ui-card__footer {
	padding: 15px 30px;
	border-top: 1px solid var(--ui-area-separator-color);
}