/*
 * Muslim.Blue Give: the giving page's own controls, on the family's tokens (Phase V: commons' family-blue.css, which
 * PublicDoc prints first, once; office.css follows it). Colors are the roles, which switch for dark by themselves; the
 * accent is one role (--mc-accent), so whatever color leads the page leads every control here.
 *
 * Phone first: amount chips wrap two or three to a row at 390px, every target is at least 44px, and the fee box stands
 * out without shouting. Logical properties only, so Arabic (B9) turns the page around by itself.
 */

.mbg-main {
	max-inline-size: 36rem;
}

.mbg-choose,
.mbg-pay {
	display: grid;
	gap: var(--mc-space-4);
}

.mbg-fund label {
	display: grid;
	align-content: center;
	gap: var(--mc-space-1);
	min-block-size: var(--mc-field);
	padding-block: var(--mc-space-2);
}

.mbg-fund__name {
	font-weight: 700;
	font-size: var(--mc-step-body);
	line-height: 1.5;
}

/*
 * The radio sits on the fund's name, the label's first line, when a description makes the label two lines (Phase V
 * Wave 2; the Zakat fund's): the row aligns to its top, the words start at the label's padding, and the radio is moved
 * down by half the difference between the name's line and its own height.
 */
.mbo-check.mbg-fund {
	align-items: start;
}

.mbg-fund label {
	align-content: start;
}

.mbo-check.mbg-fund > input {
	margin-block-start: calc(var(--mc-space-2) + (var(--mc-step-body) * 1.5 - 1.5rem) / 2);
}

.mbg-fund__desc {
	color: var(--mc-muted);
	font-size: var(--mc-step-sm);
}

/* A paragraph a donor reads: body size (Phase U). */
.mbg-onefund {
	color: var(--mc-muted);
}

.mbg-onefund strong {
	color: var(--mc-ink);
	font-size: var(--mc-step-body);
}

.mbg-chips {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
	gap: var(--mc-space-2);
	margin-block-end: var(--mc-space-3);
}

.mbg-chip {
	position: relative;
}

.mbg-chip input {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.mbg-chip label {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--mc-field);
	padding: var(--mc-space-2);
	font-weight: 700;
	color: var(--mc-accent);
	background: var(--mc-surface);
	border: 1px solid var(--mc-edge);
	border-radius: var(--mc-radius);
}

.mbg-chip input:checked + label {
	color: var(--mc-on-accent);
	background: var(--mc-accent);
	border-color: var(--mc-accent);
}

.mbg-chip input:focus-visible + label {
	outline: 3px solid var(--mc-focus);
	outline-offset: 2px;
}

/* "Other amount" shows only once Other is picked (Phase U, BM-18): with no script needed, and without :has() support
   (older browsers) the box simply stays in view, as before. */
.mbg-choose:has(input[name="amount"][value="other"]:not(:checked)) .mbo-field:has(> input[name="amount_other"]) {
	display: none;
}

.mbg-cover {
	padding: var(--mc-space-3) var(--mc-space-4);
	background: var(--mc-tint);
	border-radius: var(--mc-radius);
}

.mbg-cover label {
	font-weight: 700;
	color: var(--mc-ink);
}

.mbg-who {
	margin: 0;
	color: var(--mc-ink-soft);
}

.mbg-summary th {
	text-align: start;
	font-weight: 600;
}

.mbg-summary td {
	text-align: end;
	font-variant-numeric: tabular-nums;
}

.mbg-element {
	min-block-size: 12rem;
	padding: var(--mc-space-3);
	background: var(--mc-surface);
	border: 1px solid var(--mc-line);
	border-radius: var(--mc-radius);
}

.mbg-donor h2 {
	margin-block-start: 0;
}

.mbo-num {
	text-align: end;
	font-variant-numeric: tabular-nums;
}