/**
 * Self-contained styling for the donation form.
 *
 * Everything is scoped to .yif-donate and resets what themes commonly impose —
 * uppercase transforms, letter spacing, inherited widths — because the form
 * has to look deliberate on a theme it has never met. Colours come from custom
 * properties so a site can rebrand it without touching this file.
 */

.yif-donate {
	--yif-ink: #14331f;
	--yif-muted: #5b6b60;
	--yif-line: #d3ddd6;
	--yif-accent: #14663b;
	--yif-accent-ink: #ffffff;
	--yif-focus: #f2b01e;
	--yif-surface: #ffffff;
	--yif-radius: 10px;

	box-sizing: border-box;
	/*
	 * A themed site usually has a sticky header, and the donate buttons jump to
	 * this form by anchor. Without the scroll margin the first fields land
	 * underneath that header. The low stacking position keeps the site's own
	 * navigation and its dropdowns above the form, never behind it.
	 */
	scroll-margin-top: 140px;
	position: relative;
	z-index: 0;
	display: grid;
	gap: 18px;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	padding: 24px;
	background: var(--yif-surface);
	border: 1px solid var(--yif-line);
	border-radius: 14px;
	color: var(--yif-ink);
	font-size: 16px;
	line-height: 1.45;
	text-align: left;
}

.yif-donate *,
.yif-donate *::before,
.yif-donate *::after {
	box-sizing: inherit;
}

/*
 * Themes routinely uppercase, capitalise and letter-space form text. This site
 * title-cases every sentence in the form, which turns a plain instruction into
 * "Choose Your Network On The Secure Page". The reset therefore covers every
 * descendant, not only the controls.
 */
.yif-donate,
.yif-donate *,
.yif-donate label,
.yif-donate legend,
.yif-donate input,
.yif-donate button {
	text-transform: none;
	letter-spacing: normal;
	font-family: inherit;
}

.yif-donate > label {
	display: grid;
	gap: 6px;
	font-weight: 600;
	margin: 0;
}

.yif-donate input[type="number"],
.yif-donate input[type="tel"],
.yif-donate input[type="text"] {
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	font-size: 16px; /* 16px stops iOS zooming on focus. */
	font-weight: 400;
	color: var(--yif-ink);
	background: #fff;
	border: 1px solid var(--yif-line);
	border-radius: var(--yif-radius);
	box-shadow: none;
	outline: none;
}

.yif-donate input:focus-visible {
	border-color: var(--yif-accent);
	box-shadow: 0 0 0 3px rgba(20, 102, 59, 0.18);
}

.yif-donate .description {
	display: block;
	font-size: 13px;
	font-weight: 400;
	color: var(--yif-muted);
}

/* Sections: a title, its controls, and a note underneath */
.yif-donate__block {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
}

.yif-donate__block-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--yif-ink);
}

.yif-donate__label-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.yif-donate__optional {
	font-size: 12px;
	font-weight: 500;
	color: var(--yif-muted);
}

/* Preset amounts — pills, the chosen one filled */
.yif-donate__amounts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 10px;
}

.yif-donate .yif-donate__preset.yif-donate__preset {
	padding: 12px 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--yif-accent);
	background: var(--yif-surface);
	border: 1px solid var(--yif-line);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.yif-donate .yif-donate__preset.yif-donate__preset:hover {
	border-color: var(--yif-accent);
	background: rgba(20, 102, 59, 0.06);
}

.yif-donate .yif-donate__preset.yif-donate__preset[aria-pressed="true"] {
	color: var(--yif-accent-ink);
	background: var(--yif-accent);
	border-color: var(--yif-accent);
}

/*
 * An input with a fixed prefix — the currency, the country code. The prefix is
 * part of the field rather than a hint beside it, so nobody types TZS or +255
 * into the box and fails validation for being right.
 */
.yif-donate__group {
	display: flex;
	align-items: stretch;
	/*
	 * Not `overflow: hidden`, however tempting for rounding the prefix corners:
	 * the country list is positioned inside this box, and hiding the overflow
	 * clipped it to the height of the field. The corners are rounded on the
	 * prefix itself instead.
	 */
	background: var(--yif-surface);
	border: 1px solid var(--yif-line);
	border-radius: 12px;
}

.yif-donate__group > :first-child,
.yif-donate__group > :first-child .yif-donate__dial-toggle {
	border-top-left-radius: 11px;
	border-bottom-left-radius: 11px;
}

.yif-donate__group > :last-child {
	border-top-right-radius: 11px;
	border-bottom-right-radius: 11px;
}

.yif-donate__group:focus-within {
	border-color: var(--yif-accent);
	box-shadow: 0 0 0 3px rgba(20, 102, 59, 0.16);
}

.yif-donate__addon {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 0 14px;
	font-size: 14px;
	font-weight: 700;
	color: var(--yif-accent);
	background: rgba(20, 102, 59, 0.06);
	border-right: 1px solid var(--yif-line);
	white-space: nowrap;
}

.yif-donate .yif-donate__group input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

.yif-donate .yif-donate__group input:focus-visible {
	border: 0;
	box-shadow: none;
}

/* The two rails, as one control rather than two radio rows */
.yif-donate__segmented {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	padding: 4px;
	background: #eef3f0;
	border-radius: 14px;
}

.yif-donate__segmented label {
	display: block;
	margin: 0;
	cursor: pointer;
}

.yif-donate__segmented input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.yif-donate__segment {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--yif-muted);
	border-radius: 11px;
	transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.yif-donate__segmented input:checked + .yif-donate__segment {
	color: var(--yif-accent);
	background: var(--yif-surface);
	box-shadow: 0 1px 3px rgba(12, 40, 26, 0.14);
	font-weight: 700;
}

.yif-donate__segmented input:focus-visible + .yif-donate__segment {
	outline: 3px solid var(--yif-focus);
	outline-offset: 2px;
}

/* Everything the chosen rail needs, in its own frame */
.yif-donate__panel {
	display: grid;
	gap: 10px;
	padding: 14px;
	border: 1px solid var(--yif-line);
	border-radius: 14px;
}

.yif-donate__panel-title {
	font-size: 13px;
	color: var(--yif-muted);
}

.yif-donate__networks[hidden] { display: none !important; }

.yif-donate__networks {
	display: grid;
	gap: 8px;
}

.yif-donate__network-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
	gap: 8px;
}

.yif-donate__network {
	display: block;
	margin: 0;
	cursor: pointer;
}

.yif-donate__network input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.yif-donate__network-face {
	display: grid;
	justify-items: center;
	/* Tighter than it was: the mark is 26px where the dot was 9px, and without
	   trimming the padding the tile — and the panel it sits in — would grow. */
	gap: 5px;
	padding: 8px 8px 9px;
	font-size: 13px;
	font-weight: 600;
	color: var(--yif-ink);
	background: var(--yif-surface);
	border: 1px solid var(--yif-line);
	border-radius: 12px;
	transition: border-color 0.16s ease, background-color 0.16s ease;
}

.yif-donate__network input:checked + .yif-donate__network-face {
	border-color: var(--yif-accent);
	background: rgba(20, 102, 59, 0.07);
	box-shadow: inset 0 0 0 1px var(--yif-accent);
}

.yif-donate__network input:focus-visible + .yif-donate__network-face {
	outline: 3px solid var(--yif-focus);
	outline-offset: 2px;
}

/*
 * The network's own mark. Sized in the stylesheet rather than trusted from the
 * file, so dropping in official artwork of any intrinsic size cannot change
 * the tile height — and with it the height of the whole panel.
 */
.yif-donate__network-logo {
	width: 26px;
	height: 26px;
	display: block;
	object-fit: contain;
	border-radius: 6px;
}

.yif-donate__network-dot {
	width: 9px;
	height: 9px;
	border-radius: 999px;
}

/* What the donor is about to give, restated before they commit */
.yif-donate__summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: #fbf1d4;
	border-radius: 14px;
}

.yif-donate__summary-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8a6a15;
}

.yif-donate__summary-amount {
	margin-right: auto;
	font-size: 19px;
	font-weight: 800;
	color: #4a3a08;
}

.yif-donate__summary-label + .yif-donate__summary-amount {
	margin-left: 0;
}

.yif-donate__summary {
	flex-wrap: wrap;
}

.yif-donate__summary-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: #8a6a15;
	background: rgba(138, 106, 21, 0.14);
	border-radius: 10px;
}

/* Themes usually ship this; the form cannot assume the one it landed on does. */
.yif-donate .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.yif-donate__secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	font-size: 12px;
	color: var(--yif-muted);
}

/* Submit */
.yif-donate__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 54px;
	padding: 14px 18px;
	font-size: 16px;
	font-weight: 700;
	color: var(--yif-accent-ink);
	background: var(--yif-accent);
	border: 0;
	border-radius: 14px;
	cursor: pointer;
}

.yif-donate__submit-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	font-size: 14px;
	background: rgba(255, 255, 255, 0.18);
	border-radius: 999px;
}

.yif-donate__submit:hover:not(:disabled) {
	filter: brightness(1.08);
}

.yif-donate__submit:focus-visible {
	outline: 3px solid var(--yif-focus);
	outline-offset: 2px;
}

.yif-donate__submit:disabled {
	opacity: 0.6;
	cursor: progress;
}

.yif-donate__message:empty {
	display: none;
}

.yif-donate__message {
	margin: 0;
	padding: 12px 14px;
	font-size: 15px;
	background: rgba(20, 102, 59, 0.07);
	border-left: 3px solid var(--yif-accent);
	border-radius: 6px;
}

@media (max-width: 480px) {
	.yif-donate {
		padding: 18px;
		border-radius: 12px;
	}
}


/* ---------------------------------------------------------------------------
 * Motion
 *
 * Only where it says something: the form arriving, a choice registering, the
 * submit button showing it is working, a message appearing. Everything is
 * disabled wholesale under prefers-reduced-motion.
 * ------------------------------------------------------------------------ */

@keyframes yif-rise {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

@keyframes yif-spin {
	to { transform: rotate(360deg); }
}

/*
 * No fill mode, deliberately. `both` holds the keyframe's opacity:0 whenever the
 * animation does not actually run — a headless browser, a print stylesheet, an
 * engine that skips it — leaving a fully laid out but invisible donation form.
 * Without a fill mode the element is visible by default and the animation is
 * pure decoration on top.
 */
.yif-donate {
	animation: yif-rise 0.45s ease-out;
}

.yif-donate input[type="number"],
.yif-donate input[type="tel"],
.yif-donate input[type="text"] {
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.yif-donate__preset {
	transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

.yif-donate__preset:active {
	transform: translateY(1px);
}

.yif-donate__method label {
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.yif-donate__submit {
	transition: filter 0.18s ease, transform 0.12s ease, opacity 0.18s ease;
}

.yif-donate__submit:active:not(:disabled) {
	transform: translateY(1px);
}

/* While a donation is being started the button says so, rather than just dimming. */
.yif-donate__submit:disabled {
	position: relative;
	color: transparent;
}

.yif-donate__submit:disabled::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: var(--yif-accent-ink);
	border-radius: 50%;
	animation: yif-spin 0.7s linear infinite;
}

.yif-donate__message {
	animation: yif-rise 0.3s ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.yif-donate,
	.yif-donate * {
		animation: none !important;
		transition: none !important;
	}
	.yif-donate__submit:disabled {
		color: var(--yif-accent-ink);
	}
	.yif-donate__submit:disabled::after {
		display: none;
	}
}


/* ---------------------------------------------------------------------------
 * Modal mode
 * ------------------------------------------------------------------------ */

.yif-donate-open {
	display: inline-block;
	padding: 12px 22px;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
	color: #14331f;
	background: #f2b01e;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	transition: filter 0.18s ease, transform 0.12s ease;
}

.yif-donate-open:hover { filter: brightness(1.06); }
.yif-donate-open:active { transform: translateY(1px); }

/*
 * The dialog is a card, not a bare form on a backdrop.
 *
 * The header holds still while the body scrolls: on a short phone screen the
 * form is taller than the viewport, and a close button that scrolls out of
 * reach leaves the donor stuck behind a modal.
 */
dialog.yif-donate-modal {
	width: min(680px, calc(100vw - 24px));
	max-height: calc(100dvh - 24px);
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

dialog.yif-donate-modal::backdrop {
	background: rgba(10, 30, 18, 0.62);
	backdrop-filter: blur(2px);
}

.yif-donate-modal__inner {
	display: flex;
	flex-direction: column;
	max-height: calc(100dvh - 24px);
	overflow: hidden;
	background: var(--yif-surface, #fff);
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(6, 26, 16, 0.35);
}

.yif-donate-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex: 0 0 auto;
	padding: 16px 18px;
	border-bottom: 1px solid #e6ece8;
	background: #fff;
}

.yif-donate-modal__title {
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	color: #14331f;
	text-transform: none;
	letter-spacing: normal;
}

.yif-donate-modal__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.yif-donate-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	padding: 0;
	color: #5b6b60;
	background: #f2f6f3;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.16s ease, color 0.16s ease;
}

.yif-donate-close:hover {
	color: #14331f;
	background: #e4ece7;
}

.yif-donate-close:focus-visible {
	outline: 3px solid #f2b01e;
	outline-offset: 2px;
}

/*
 * Inside the dialog the card is the dialog, so the form drops its own frame
 * rather than drawing a second one inside the first.
 */
dialog.yif-donate-modal .yif-donate {
	max-width: none;
	margin: 0;
	padding: 18px;
	background: transparent;
	border: 0;
	border-radius: 0;
	animation: none;
}

@media (prefers-reduced-motion: no-preference) {
	dialog.yif-donate-modal[open] {
		animation: yif-rise 0.28s ease-out;
	}
}




/* What the donor keeps: the transaction, copyable and shareable */
.yif-donate__receipt[hidden] { display: none !important; }

.yif-donate__receipt {
	display: grid;
	gap: 10px;
	padding: 14px;
	background: rgba(20, 102, 59, 0.06);
	border: 1px solid var(--yif-line);
	border-radius: 12px;
}

.yif-donate__receipt-line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 0;
}

.yif-donate__receipt-label {
	font-size: 13px;
	opacity: 0.75;
}

.yif-donate__reference {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 15px;
	font-weight: 700;
	word-break: break-all;
}

.yif-donate__receipt-actions {
	display: flex;
	gap: 8px;
}

.yif-donate__copy,
.yif-donate__share {
	padding: 8px 14px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--yif-ink);
	background: var(--yif-surface);
	border: 1px solid var(--yif-line);
	border-radius: var(--yif-radius);
	cursor: pointer;
}

.yif-donate__copy:hover,
.yif-donate__share:hover { border-color: var(--yif-accent); }

.yif-donate__share[hidden] { display: none !important; }



/*
 * Themes skin every button on the page, and theirs is more specific than a
 * single class, so the presets, the submit and the close came out in the site's
 * yellow with square corners. These are payment controls: the primary action
 * has to read as the primary action, and the presets must not compete with it.
 * The selector is doubled rather than reaching for !important, so a site that
 * genuinely wants to restyle the form still can.
 */
.yif-donate .yif-donate__preset.yif-donate__preset {
	color: var(--yif-accent);
	background: rgba(20, 102, 59, 0.06);
	border: 1px solid var(--yif-line);
	border-radius: var(--yif-radius);
	text-transform: none;
	letter-spacing: normal;
}

.yif-donate .yif-donate__preset.yif-donate__preset:hover,
.yif-donate .yif-donate__preset.yif-donate__preset:focus-visible {
	background: rgba(20, 102, 59, 0.12);
	border-color: var(--yif-accent);
}

.yif-donate .yif-donate__submit.yif-donate__submit {
	color: var(--yif-accent-ink);
	background: var(--yif-accent);
	border: 0;
	border-radius: 14px;
	text-transform: none;
	letter-spacing: normal;
}

.yif-donate-modal .yif-donate-close.yif-donate-close {
	color: #5b6b60;
	background: #f2f6f3;
	border: 0;
	border-radius: 999px;
}

.yif-donate-modal .yif-donate-close.yif-donate-close:hover {
	color: #14331f;
	background: #e4ece7;
}

.yif-donate .yif-donate__copy.yif-donate__copy,
.yif-donate .yif-donate__share.yif-donate__share {
	color: var(--yif-ink);
	background: var(--yif-surface);
	border: 1px solid var(--yif-line);
	border-radius: var(--yif-radius);
	text-transform: none;
}


/*
 * Transient feedback, over the form rather than under it.
 *
 * Attached to the dialog, because an open <dialog> is painted in the browser's
 * top layer and a toast anywhere else would sit behind the backdrop whatever
 * its z-index.
 */
.yif-toast-host {
	/*
	 * Absolute, so inside a dialog it hangs just under the header instead of
	 * across it — an open <dialog> is itself a containing block. In the inline
	 * form there is no dialog, and the body anchors it to the top of the page.
	 */
	position: absolute;
	top: 64px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2147483000;
	max-width: min(420px, calc(100vw - 32px));
	padding: 12px 16px;
	font: 600 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: #fff;
	background: #8f2033;
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba(6, 26, 16, 0.32);
	text-align: center;
}

.yif-toast-host[hidden] { display: none !important; }
.yif-toast-host--success { background: var(--yif-accent, #14663b); }

/* The inline form has no dialog to hang from, so it hangs from the viewport. */
body > .yif-toast-host {
	position: fixed;
	top: 18px;
}

@media (prefers-reduced-motion: no-preference) {
	.yif-toast-host { animation: yif-toast-in 0.22s ease-out; }
}

/*
 * Movement only, never opacity. An animation that starts at opacity 0 leaves
 * the element invisible wherever it does not run to completion — a paused
 * animation, a screenshot, a browser that treats it differently — and an
 * invisible error message is worse than an unanimated one. The form's own
 * entry animation carries the same warning a few hundred lines up.
 */
@keyframes yif-toast-in {
	from { transform: translate(-50%, -10px); }
	to { transform: translate(-50%, 0); }
}

/* The end of the donation: the outcome, and the transaction to keep. */
.yif-donate__success[hidden] { display: none !important; }

.yif-donate__success {
	display: grid;
	justify-items: center;
	gap: 12px;
	padding: 8px 0 4px;
	text-align: center;
}

.yif-donate__success-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	color: var(--yif-accent);
	background: rgba(20, 102, 59, 0.1);
	border-radius: 999px;
}

.yif-donate__success-title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--yif-ink);
	text-transform: none;
	letter-spacing: normal;
}

.yif-donate__success-detail {
	margin: 0;
	color: var(--yif-muted);
}

.yif-donate__success .yif-donate__receipt {
	width: 100%;
	justify-items: center;
}

.yif-donate .yif-donate__done.yif-donate__done {
	min-height: 44px;
	padding: 10px 24px;
	font-weight: 700;
	color: var(--yif-accent-ink);
	background: var(--yif-accent);
	border: 0;
	border-radius: var(--yif-radius);
	cursor: pointer;
	text-transform: none;
}

/*
 * Once the donation is under way, only the panel with something to say remains
 * — the in-flight status, or the outcome. Both are listed here: leaving the
 * status panel out hid the very thing this class exists to reveal.
 */
.yif-donate--done > *:not(.yif-donate__success):not(.yif-donate__status):not(.yif-donate__message) {
	display: none;
}


/*
 * The field the toast is talking about.
 *
 * Doubled selector, because a theme's own input styling is usually more
 * specific than one class and this is the one moment the form must be able to
 * override it — a validation message with nothing to point at leaves the donor
 * hunting through the form for the box that is wrong.
 */
.yif-donate .yif-donate__field--invalid.yif-donate__field--invalid {
	border-color: #b3253c;
	background: #fff6f7;
	box-shadow: 0 0 0 3px rgba(179, 37, 60, 0.16);
}

.yif-donate .yif-donate__field--invalid.yif-donate__field--invalid:focus-visible {
	border-color: #8f2033;
	box-shadow: 0 0 0 3px rgba(179, 37, 60, 0.28);
}


/*
 * Phones get a sheet, not a shrunken dialog.
 *
 * A centred card with margins on all four sides wastes the two things a phone
 * is short of — width and height — and puts the submit button in the middle of
 * the screen. Anchored to the bottom edge, the form is full width, the header
 * stays put, and the button sits where the thumb already is.
 */
@media (max-width: 540px) {
	dialog.yif-donate-modal,
	dialog.yif-donate-modal:has(.yif-donate--checkout) {
		width: 100%;
		max-width: 100%;
		max-height: 94dvh;
		inset: auto 0 0 0;
		margin: 0;
	}

	.yif-donate-modal__inner {
		max-height: 94dvh;
		border-radius: 18px 18px 0 0;
	}

	.yif-donate-modal__header {
		padding: 14px 16px;
	}

	.yif-donate-modal__title {
		font-size: 15px;
	}

	dialog.yif-donate-modal .yif-donate {
		padding: 14px 16px 18px;
		gap: 14px;
	}

	/* Two across reads better than four squeezed ones. */
	.yif-donate__amounts {
		grid-template-columns: repeat(2, 1fr);
	}

	.yif-donate__network-options {
		grid-template-columns: repeat(3, 1fr);
		gap: 6px;
	}

	.yif-donate__network-face {
		padding: 7px 4px 8px;
		font-size: 12px;
	}

	.yif-donate__network-logo {
		width: 22px;
		height: 22px;
	}

	.yif-donate__summary {
		padding: 12px 14px;
	}

	.yif-donate__summary-amount {
		font-size: 17px;
	}

	.yif-donate__submit {
		min-height: 50px;
		font-size: 15px;
	}
}

/* Very narrow phones: the presets stack rather than truncate their labels. */
@media (max-width: 340px) {
	.yif-donate__amounts {
		grid-template-columns: 1fr;
	}

	.yif-donate__addon {
		padding: 0 10px;
		font-size: 13px;
	}
}

.yif-donate__card-note[hidden] { display: none !important; }

.yif-donate__card-note {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--yif-muted);
}


/* While the payment is in flight, in the form's place */
.yif-donate__status[hidden] { display: none !important; }

/*
 * Every panel is the same compact size.
 *
 * Not the form's height — a spinner and a sentence adrift in a window three
 * times too big reads as something having gone wrong. And not each panel's own
 * height either, or the modal jumps as the wording changes between "Starting
 * your donation", "Check your phone" and "Thank you". One height, set here,
 * holds for all of them.
 */
.yif-donate__status,
.yif-donate__success {
	/* These sit beside `.yif-donate`, not inside it, so they never inherited
	   its border-box. Without this, `min-height` sized the content box and the
	   padding was added on top — every panel stood 24px taller than the number
	   written below, and the two figures could not be reasoned about. */
	box-sizing: border-box;
	align-content: center;
	/* Above the tallest panel's own content — the outcome, with its receipt and
	   its close button — so none of them stretches the floor. Lowering this
	   below that natural height would bring the jump back: the tall panel would
	   grow past it while the others stayed put, which is the whole thing this
	   rule exists to prevent. The panels' own padding was reduced alongside it. */
	min-height: 300px;
}

.yif-donate__status {
	display: grid;
	justify-items: center;
	gap: 8px;
	padding: 14px 8px 10px;
	text-align: center;
}

.yif-donate__status-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--yif-ink);
	text-transform: none;
	letter-spacing: normal;
}

.yif-donate__status-detail {
	margin: 0;
	max-width: 42ch;
	color: var(--yif-muted);
}

/*
 * Rotation only. An animation that begins at opacity 0 leaves the element
 * invisible wherever it does not run — the toast learned that the hard way a
 * few hundred lines up.
 */
.yif-donate__spinner {
	width: 34px;
	height: 34px;
	border: 3px solid rgba(20, 102, 59, 0.18);
	border-top-color: var(--yif-accent);
	border-radius: 999px;
}

@media (prefers-reduced-motion: no-preference) {
	.yif-donate__spinner { animation: yif-spin 0.9s linear infinite; }
}

@keyframes yif-spin {
	to { transform: rotate(360deg); }
}

/* The status line stays for screen readers; the panel is what is seen. */
.yif-donate__message {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.yif-donate__version {
	opacity: 0.55;
	font-variant-numeric: tabular-nums;
}

.yif-donate__status-meta {
	margin: 2px 0 0;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--yif-accent);
	background: rgba(20, 102, 59, 0.07);
	border-radius: 999px;
}

.yif-donate__status-meta:empty { display: none; }

.yif-donate__spinner[hidden] { display: none !important; }
.yif-donate__retry[hidden] { display: none !important; }

.yif-donate .yif-donate__retry.yif-donate__retry {
	min-height: 44px;
	margin-top: 4px;
	padding: 10px 22px;
	font-weight: 700;
	color: var(--yif-accent-ink);
	background: var(--yif-accent);
	border: 0;
	border-radius: var(--yif-radius);
	cursor: pointer;
	text-transform: none;
}

/* The country picker */
.yif-donate__dial {
	position: relative;
	display: flex;
}

.yif-donate .yif-donate__dial-toggle.yif-donate__dial-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 100%;
	padding: 0 12px;
	font-size: 14px;
	font-weight: 700;
	color: var(--yif-accent);
	background: rgba(20, 102, 59, 0.06);
	border: 0;
	border-right: 1px solid var(--yif-line);
	border-radius: 0;
	cursor: pointer;
	white-space: nowrap;
}

.yif-donate .yif-donate__dial-toggle:disabled {
	cursor: default;
	opacity: 0.9;
}

.yif-donate .yif-donate__dial-toggle:disabled .yif-donate__dial-caret {
	visibility: hidden;
}

.yif-donate__dial-flag {
	font-size: 16px;
	line-height: 1;
}

/*
 * The list is absolutely positioned inside the field rather than appended to
 * the page: an open <dialog> paints in the top layer, and anything outside it
 * would be hidden behind the backdrop however high its z-index.
 */
.yif-donate__dial-panel[hidden] { display: none !important; }

.yif-donate__dial-panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 30;
	width: min(320px, calc(100vw - 64px));
	padding: 8px;
	background: var(--yif-surface);
	border: 1px solid var(--yif-line);
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(6, 26, 16, 0.22);
}

.yif-donate .yif-donate__dial-search {
	width: 100%;
	min-height: 38px;
	margin-bottom: 6px;
	padding: 8px 10px;
	font-size: 14px;
	border: 1px solid var(--yif-line);
	border-radius: 9px;
}

.yif-donate__dial-list {
	max-height: 240px;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
}

.yif-donate__dial-list [role="option"] {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	font-size: 14px;
	border-radius: 8px;
	cursor: pointer;
}

.yif-donate__dial-list [role="option"][hidden] { display: none; }
.yif-donate__dial-list [role="option"]:hover { background: rgba(20, 102, 59, 0.08); }

.yif-donate__dial-list [role="option"][aria-selected="true"] {
	font-weight: 700;
	color: var(--yif-accent);
	background: rgba(20, 102, 59, 0.1);
}

.yif-donate__dial-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.yif-donate__dial-plus {
	font-variant-numeric: tabular-nums;
	color: var(--yif-muted);
}

.yif-donate__dial-empty {
	margin: 6px 0 2px;
	padding: 0 10px;
	font-size: 13px;
	color: var(--yif-muted);
}

/*
 * The narrow-screen panel height.
 *
 * Deliberately after the rule it overrides rather than with the rest of the
 * narrow-screen block: the two selectors have equal specificity, so the one
 * written later wins. Placed earlier, as it was, this had no effect at any
 * width and every phone got the desktop height.
 */
@media (max-width: 540px) {
	.yif-donate__status,
	.yif-donate__success {
		min-height: 272px;
	}
}

/*
 * Test mode. Deliberately loud: the whole failure this guards against is a
 * donor who cannot tell a rehearsal from the real thing, and a banner they
 * skim past does not guard against it.
 */
.yif-donate__sandbox {
	box-sizing: border-box;
	margin: 0 0 14px;
	padding: 9px 12px;
	border: 1px solid #e0a800;
	border-left-width: 4px;
	border-radius: 6px;
	background: #fff8e5;
	color: #6b4e00;
	font-size: 13px;
	line-height: 1.45;
}

.yif-donate__sandbox strong {
	display: inline-block;
	margin-right: 4px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 12px;
}