/* Lightweight local Bootstrap-inspired utilities for layout, spacing, and buttons. */
.container {
	width: min(100% - 32px, 1200px);
	margin-inline: auto;
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin-inline: -8px;
}

.col {
	flex: 1 0 0%;
	padding-inline: 8px;
}

.col-12 {
	flex: 0 0 100%;
	max-width: 100%;
	padding-inline: 8px;
}

.col-md-6 {
	flex: 0 0 100%;
	max-width: 100%;
	padding-inline: 8px;
}

.d-flex {
	display: flex;
}

.align-items-center {
	align-items: center;
}

.justify-content-between {
	justify-content: space-between;
}

.gap-2 {
	gap: 8px;
}

.gap-3 {
	gap: 16px;
}

.mt-3 {
	margin-top: 16px;
}

.mb-3 {
	margin-bottom: 16px;
}

.p-3 {
	padding: 16px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 8px 14px;
	border: 1px solid transparent;
	border-radius: 8px;
	font-weight: 700;
	cursor: pointer;
}

.btn-primary {
	background: var(--myload-primary, #4F46E5);
	color: #FFFFFF;
}

.btn-outline-primary {
	border-color: var(--myload-primary, #4F46E5);
	color: var(--myload-primary, #4F46E5);
	background: transparent;
}

@media (min-width: 768px) {
	.col-md-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}
}