/*
 * Bundle block styles.
 *
 * Colours are inherited from the theme wherever possible, so this block sits in
 * the page rather than fighting it. Override any of the custom properties below
 * in your theme to restyle without touching this file.
 */

.mgs-bundle {
	--mgs-bundle-border: rgba(127, 127, 127, 0.25);
	--mgs-bundle-surface: rgba(127, 127, 127, 0.06);
	--mgs-bundle-owned: #2e7d32;
	--mgs-bundle-muted: rgba(127, 127, 127, 0.9);
	--mgs-bundle-radius: 6px;

	margin: 24px 0;
	border: 1px solid var(--mgs-bundle-border);
	border-radius: var(--mgs-bundle-radius);
	padding: 18px 20px;
	background: var(--mgs-bundle-surface);
}

.mgs-bundle__title {
	margin: 0 0 12px;
	font-size: 1.05em;
}

.mgs-bundle__list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.mgs-bundle__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	padding: 7px 0;
	border-bottom: 1px solid var(--mgs-bundle-border);
}

.mgs-bundle__item:last-child {
	border-bottom: 0;
}

/* Status marker, drawn in CSS so no emoji is baked into the markup. */
.mgs-bundle__item::before {
	flex: 0 0 auto;
	width: 1.1em;
	font-weight: 700;
	line-height: 1;
}

.mgs-bundle__item.is-owned::before {
	content: "\2713"; /* check mark */
	color: var(--mgs-bundle-owned);
}

.mgs-bundle__item.is-missing::before {
	content: "\002B"; /* plus sign */
	color: var(--mgs-bundle-muted);
}

.mgs-bundle__item.is-owned .mgs-bundle__link {
	opacity: 0.7;
}

.mgs-bundle__link {
	flex: 1 1 auto;
}

.mgs-bundle__price,
.mgs-bundle__tag {
	flex: 0 0 auto;
	font-size: 0.9em;
	color: var(--mgs-bundle-muted);
}

.mgs-bundle__tag--owned {
	color: var(--mgs-bundle-owned);
}

.mgs-bundle__summary {
	border-top: 1px solid var(--mgs-bundle-border);
	padding-top: 14px;
}

.mgs-bundle__summary p {
	margin: 0 0 10px;
}

.mgs-bundle__counts,
.mgs-bundle__signin {
	color: var(--mgs-bundle-muted);
	font-size: 0.95em;
}

.mgs-bundle__complete {
	color: var(--mgs-bundle-owned);
	font-weight: 600;
}

.mgs-bundle__total {
	font-size: 1.05em;
}

.mgs-bundle__form {
	margin: 0;
}

.mgs-bundle__button {
	display: inline-block;
}

/* Admin only diagnostic block. */
.mgs-bundle--notice {
	border-style: dashed;
}

@media (max-width: 480px) {
	.mgs-bundle {
		padding: 14px;
	}

	.mgs-bundle__item {
		align-items: flex-start;
	}
}