/**
 * The custom donation page (page-support.php) and its thank-you
 * (page-donation-thank-you.php).
 *
 * The palette is NOT here. It arrives as custom properties on :root from
 * mfr_support_assets(), which reads them out of mfr_support_config() — so a
 * recolour is a config edit and never a stylesheet one. Every colour below is
 * a var(--mfr-s-*) with a fallback, and the fallbacks exist only so the page
 * still looks like itself if that inline style ever fails to print.
 *
 * Layout: one white card holding a fixed left rail and a fluid main column.
 * The main column holds the heading, the two panels side by side, and the
 * footer strip. It collapses in two stages — panels stack first, then the rail
 * moves above them — because the panels are the part that stops working
 * narrow, and the rail is still worth its width for a while after that.
 *
 * @package VETO Child
 */

/* -------------------------------------------------------------------------
 * Frame
 * ---------------------------------------------------------------------- */

/*
 * Text for screen readers only. WordPress themes usually ship this rule and
 * this one does not — neither the parent nor the child stylesheet defines it —
 * so the legends and link labels on this page would print on screen without it.
 *
 * Clipped rather than display:none, because display:none takes the text out of
 * the accessibility tree as well and then it is not read to anybody either.
 */
.mfr-support .screen-reader-text,
.mfr-thanks .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/*
 * Border-box, scoped to this page's two roots.
 *
 * Not an assumption that the theme has no reset — it is that this stylesheet
 * should not need to know. Without it every padded box here is its padding
 * wider and taller than the width and height it was given, and the amount
 * cards overflow their own grid rows and overlap the row beneath.
 */
.mfr-support,
.mfr-support *,
.mfr-support *::before,
.mfr-support *::after,
.mfr-thanks,
.mfr-thanks *,
.mfr-thanks *::before,
.mfr-thanks *::after {
	box-sizing: border-box;
}

.mfr-support {
	background: #fff;
	color: var(--mfr-s-body, #5d5a77);
	font-size: 15px;
	line-height: 1.5;
	padding: 40px 20px 64px;
}

.mfr-support__card {
	background: #fff;
	border: 1px solid var(--mfr-s-border, #e3e0f0);
	border-radius: 26px;
	box-shadow: 0 18px 60px rgba(36, 26, 82, 0.08);
	display: grid;
	grid-template-columns: 312px minmax(0, 1fr);
	margin: 0 auto;
	max-width: var(--mfr-s-max-width, 1360px);
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Left rail
 * ---------------------------------------------------------------------- */

.mfr-support__rail {
	border-right: 1px solid var(--mfr-s-border, #e3e0f0);
	padding: 34px 26px 30px;
}

/*
 * The two handwritten lines and the gold flourish under each.
 *
 * The swash is a wide, flat SVG sized entirely by its width — its height
 * follows. It is given a width in each place it is used rather than a share of
 * the column, because the column is 312px in the rail and the full card width
 * in the footer, and a percentage of either would draw two very different
 * flourishes.
 *
 * The negative top margin is what makes it read as part of the writing rather
 * than a rule underneath it: the SVG's viewBox has slack above the stroke, and
 * this pulls the stroke back up under the descenders.
 */
.mfr-support__swash {
	color: var(--mfr-s-gold, #ffc42e);
	display: block;
	margin-top: -6px;
}

.mfr-support__swash svg {
	display: block;
	height: auto;
	width: 100%;
}

/*
 * Tilted, as the comp has it — the block sits at a slight angle, the way a
 * line written by hand on a printed page does. The letterforms alone do not
 * give this: Dancing Script slants its strokes but sets on a level baseline,
 * and level is what made it read as typeset rather than written.
 *
 * A transform rather than anything that affects flow, so the portrait beneath
 * it does not move. `transform-origin` is the left edge because the text is
 * left-aligned here; the phone layout centres it and re-anchors it to match.
 *
 * The small left margin is the price of the rotation: the bottom line swings
 * right and the top line swings left, and without it the top line's first
 * letter would cross the rail's padding.
 */
.mfr-support__signature {
	color: var(--mfr-s-purple, #311f5a);
	font-family: var(--mfr-s-script, cursive);
	font-size: 34px;
	line-height: 1.05;
	margin: 0 0 6px 6px;
	transform: rotate(-7deg);
	transform-origin: left center;
}

/*
 * Under "Always.", the last of the three lines — not the full column.
 *
 * Sized in `em` so it tracks the script rather than a pixel guess: the word is
 * 2.85em wide at any size, and the stroke sits just inside it. A fixed width
 * was 132px against a 97px word, which put the flourish out past the writing.
 */
.mfr-support__signature .mfr-support__swash {
	margin-left: 4px;
	width: 2.7em;
}

/*
 * The portrait sits on the bottom edge of its box with the paint stroke behind
 * it. `align-items: end` rather than a height, so the box is exactly as deep as
 * the photo makes it and the stroke stretches to match — a fixed height would
 * leave the subject floating the day the crop changes.
 */
.mfr-support__portrait {
	align-items: end;
	display: grid;
	margin-bottom: 18px;
}

.mfr-support__portrait > * {
	grid-area: 1 / 1;
}

.mfr-support__brush {
	color: var(--mfr-s-purple-soft, #412d82);
	display: block;
	margin-bottom: -2%;
}

.mfr-support__brush svg {
	display: block;
	height: auto;
	width: 100%;
}

/* No brush available: a tinted panel behind the photo instead of nothing. */
.mfr-support__portrait--plain {
	background: var(--mfr-s-surface, #f5f4fb);
	border-radius: 16px;
}

.mfr-support__portrait-img {
	display: block;
	height: auto;
	justify-self: center;
	max-width: 96%;
	width: auto;
}

/*
 * The name plate — name, badge, seat line, tagline — is centred as a block.
 *
 * It sits between two things that are not: the handwritten signature above it,
 * which is a flourish and reads as one set against the left edge, and the trust
 * list below, whose icon-and-text rows have to start on a common left margin to
 * be scannable. Centring the identity block in the middle of them follows the
 * portrait, which is centred in its own box already.
 *
 * The seat line is not listed here because it centres itself: it is a flex row
 * whose gold rules take whatever space is left on either side.
 */
.mfr-support__name {
	color: var(--mfr-s-purple, #311f5a);
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 0.95;
	margin: 0 0 10px;
	text-align: center;
	text-transform: uppercase;
}

/*
 * A block that shrinks to its text and is then centred by its own auto margins.
 * `text-align: center` on the parent would do it too, but the parent is the
 * whole rail and that would drag the trust list along with it.
 */
.mfr-support__badge {
	background: var(--mfr-s-purple-soft, #412d82);
	border-radius: 6px;
	color: #fff;
	display: block;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin: 0 auto 12px;
	padding: 5px 14px;
	text-transform: uppercase;
	width: fit-content;
}

/*
 * The gold rules either side of "Richmond First" are drawn on the pseudo
 * elements of a flex row, so they take up whatever width is left over rather
 * than a guessed one.
 */
.mfr-support__seat {
	align-items: center;
	color: var(--mfr-s-ink, #241a52);
	display: flex;
	font-size: 16px;
	font-weight: 800;
	gap: 10px;
	letter-spacing: 0.06em;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.mfr-support__seat::before,
.mfr-support__seat::after {
	background: var(--mfr-s-gold, #ffc42e);
	border-radius: 2px;
	content: "";
	flex: 1;
	height: 3px;
}

.mfr-support__tagline {
	color: var(--mfr-s-ink, #241a52);
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 24px;
	text-align: center;
}

.mfr-support__trust {
	border-top: 1px solid var(--mfr-s-border, #e3e0f0);
	list-style: none;
	margin: 0;
	padding: 0;
}

.mfr-support__trust-item {
	align-items: flex-start;
	border-bottom: 1px solid var(--mfr-s-border, #e3e0f0);
	display: flex;
	gap: 12px;
	padding: 14px 0;
}

.mfr-support__trust-icon {
	align-items: center;
	background: var(--mfr-s-surface, #f5f4fb);
	border: 1px solid var(--mfr-s-border, #e3e0f0);
	border-radius: 50%;
	color: var(--mfr-s-purple, #311f5a);
	display: flex;
	flex: 0 0 40px;
	height: 40px;
	justify-content: center;
	width: 40px;
}

.mfr-support__trust-icon svg {
	height: 20px;
	width: 20px;
}

.mfr-support__trust-text {
	font-size: 13px;
	line-height: 1.45;
}

.mfr-support__trust-text strong {
	color: var(--mfr-s-ink, #241a52);
	display: block;
	font-size: 14px;
}

/* -------------------------------------------------------------------------
 * Main column
 * ---------------------------------------------------------------------- */

.mfr-support__main {
	display: flex;
	flex-direction: column;
	padding: 34px 32px 26px;
}

.mfr-support__head {
	margin-bottom: 22px;
	text-align: center;
}

.mfr-support__headline {
	color: var(--mfr-s-purple, #311f5a);
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.1;
	margin: 0 0 8px;
	text-transform: uppercase;
}

/* `<em>` is the gold highlight throughout this design, never italics. */
.mfr-support__headline em {
	color: var(--mfr-s-gold, #ffc42e);
	font-style: normal;
}

/*
 * The gold swash under the sub-heading. An underline would sit on the text
 * baseline and break between words; this is one stroke under the whole line.
 */
.mfr-support__subhead {
	color: var(--mfr-s-ink, #241a52);
	display: inline-block;
	font-size: 17px;
	font-weight: 600;
	margin: 0;
	padding-bottom: 12px;
	position: relative;
}

.mfr-support__subhead::after {
	background: var(--mfr-s-gold, #ffc42e);
	border-radius: 3px;
	bottom: 0;
	content: "";
	height: 4px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 128px;
}

.mfr-support__panels {
	align-items: start;
	display: grid;
	flex: 1;
	gap: 22px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The event panel is switched off in the config: one panel, and not stretched
   across a width meant for two. */
.mfr-support__panels--single {
	grid-template-columns: minmax(0, 640px);
	justify-content: center;
}

/* -------------------------------------------------------------------------
 * Panels
 * ---------------------------------------------------------------------- */

.mfr-support__panel {
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 24px;
}

.mfr-support__panel--donate {
	background: var(--mfr-s-surface, #f5f4fb);
	border: 1px solid var(--mfr-s-border, #e3e0f0);
}

.mfr-support__panel--event {
	background: var(--mfr-s-cream, #fdf7e6);
	border: 1px solid var(--mfr-s-cream-line, #f3e4b8);
}

.mfr-support__panel-head {
	align-items: center;
	display: flex;
	gap: 14px;
	margin-bottom: 14px;
}

.mfr-support__panel-icon {
	align-items: center;
	border-radius: 50%;
	display: flex;
	flex: 0 0 54px;
	height: 54px;
	justify-content: center;
	width: 54px;
}

.mfr-support__panel-icon svg {
	height: 26px;
	width: 26px;
}

.mfr-support__panel-icon--purple {
	background: #e9e4f7;
	color: var(--mfr-s-purple, #311f5a);
}

.mfr-support__panel-icon--gold {
	background: var(--mfr-s-gold, #ffc42e);
	color: var(--mfr-s-purple, #311f5a);
}

.mfr-support__panel-title {
	color: var(--mfr-s-purple, #311f5a);
	font-size: clamp(19px, 1.7vw, 25px);
	font-weight: 800;
	line-height: 1.12;
	margin: 0;
	text-transform: uppercase;
}

.mfr-support__panel-sub {
	color: var(--mfr-s-ink, #241a52);
	font-size: 16px;
	font-weight: 600;
	margin: 2px 0 0;
}

.mfr-support__panel-intro {
	color: var(--mfr-s-body, #5d5a77);
	font-size: 15px;
	margin: 0 0 18px;
}

/* -------------------------------------------------------------------------
 * Amount cards
 * ---------------------------------------------------------------------- */

.mfr-support-form__amounts {
	border: 0;
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0 0 12px;
	padding: 0;
}

/*
 * An odd card at the end of the ladder is centred across both columns rather
 * than left hanging in the first one. This is what lets the config add or
 * remove a tier without anyone having to think about the grid.
 */
.mfr-support-amount:last-child:nth-of-type(odd) {
	grid-column: 1 / -1;
	margin: 0 auto;
	width: calc(50% - 6px);
}

.mfr-support-amount {
	cursor: pointer;
	display: block;
}

/*
 * The radio is the control; the card is its face. Kept in the page rather than
 * display:none so it stays focusable and reachable by keyboard — the focus ring
 * is drawn on the face below.
 */
.mfr-support-amount__input {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

/*
 * The same thing again, louder, because the parent theme carries this:
 *
 *     label > input[type="radio"] { position: static !important;
 *                                   display: inline-block !important; }
 *
 * and an amount card is exactly that shape — a radio directly inside a label.
 * Losing that fight put the 1px radio back into the flow, where it opened a
 * line box of its own and pushed the card's face about 23px down, out of the
 * bottom of its own grid row; the last card then sat over the custom-amount box
 * beneath it.
 *
 * `!important` is the only thing that answers an `!important`, and the selector
 * is one class more specific than the theme's so it wins the tie rather than
 * depending on which stylesheet loads last.
 */
.mfr-support-amount > input.mfr-support-amount__input {
	display: block !important;
	position: absolute !important;
}

.mfr-support-amount__face {
	align-items: center;
	background: #fff;
	border: 1.5px solid var(--mfr-s-border, #e3e0f0);
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	height: 100%;
	justify-content: center;
	padding: 16px 10px;
	text-align: center;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.mfr-support-amount:hover .mfr-support-amount__face {
	border-color: var(--mfr-s-purple-soft, #412d82);
}

.mfr-support-amount__icon {
	color: var(--mfr-s-purple, #311f5a);
	display: block;
}

.mfr-support-amount__icon svg {
	height: 22px;
	width: 22px;
}

.mfr-support-amount__figure {
	color: var(--mfr-s-ink, #241a52);
	font-size: 21px;
	font-weight: 800;
}

.mfr-support-amount__label {
	color: var(--mfr-s-body, #5d5a77);
	font-size: 12.5px;
}

.mfr-support-amount__input:checked + .mfr-support-amount__face {
	background: var(--mfr-s-purple, #311f5a);
	border-color: var(--mfr-s-gold, #ffc42e);
}

.mfr-support-amount__input:checked + .mfr-support-amount__face .mfr-support-amount__icon {
	color: var(--mfr-s-gold, #ffc42e);
}

.mfr-support-amount__input:checked + .mfr-support-amount__face .mfr-support-amount__figure {
	color: #fff;
}

.mfr-support-amount__input:checked + .mfr-support-amount__face .mfr-support-amount__label {
	color: rgba(255, 255, 255, 0.82);
}

.mfr-support-amount__input:focus-visible + .mfr-support-amount__face {
	outline: 3px solid var(--mfr-s-purple-soft, #412d82);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Custom amount
 * ---------------------------------------------------------------------- */

.mfr-support-custom {
	align-items: center;
	background: #fff;
	border: 1.5px solid var(--mfr-s-border, #e3e0f0);
	border-radius: 14px;
	display: flex;
	gap: 12px;
	margin-bottom: 14px;
	padding: 12px 14px;
}

.mfr-support-custom__icon {
	align-items: center;
	background: #e9e4f7;
	border-radius: 50%;
	color: var(--mfr-s-purple, #311f5a);
	display: flex;
	flex: 0 0 34px;
	height: 34px;
	justify-content: center;
	width: 34px;
}

.mfr-support-custom__icon svg {
	height: 17px;
	width: 17px;
}

.mfr-support-custom__copy {
	flex: 1;
	min-width: 0;
}

.mfr-support-custom__title {
	color: var(--mfr-s-ink, #241a52);
	cursor: pointer;
	display: block;
	font-size: 14px;
	font-weight: 700;
}

.mfr-support-custom__text {
	color: var(--mfr-s-body, #5d5a77);
	display: block;
	font-size: 12.5px;
}

.mfr-support-custom__field {
	align-items: stretch;
	border: 1.5px solid var(--mfr-s-border, #e3e0f0);
	border-radius: 10px;
	display: flex;
	flex: 0 0 auto;
	overflow: hidden;
}

.mfr-support-custom__prefix {
	align-items: center;
	background: var(--mfr-s-surface, #f5f4fb);
	color: var(--mfr-s-ink, #241a52);
	display: flex;
	font-weight: 700;
	padding: 0 10px;
}

.mfr-support-custom__input {
	border: 0;
	font-size: 16px;
	font-weight: 600;
	max-width: 108px;
	padding: 9px 10px;
	text-align: right;
	width: 108px;
}

.mfr-support-custom__input:focus {
	outline: 0;
}

.mfr-support-custom__field:focus-within {
	border-color: var(--mfr-s-purple-soft, #412d82);
}

/* -------------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------------- */

.mfr-support__cta {
	align-items: center;
	background: var(--mfr-s-gold, #ffc42e);
	border: 0;
	border-radius: 12px;
	color: var(--mfr-s-purple, #311f5a);
	cursor: pointer;
	display: flex;
	font-size: 16px;
	font-weight: 800;
	gap: 12px;
	justify-content: center;
	letter-spacing: 0.03em;
	margin-top: auto;
	padding: 15px 20px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.15s ease;
	width: 100%;
}

.mfr-support__cta:hover,
.mfr-support__cta:focus {
	background: var(--mfr-s-gold-deep, #e8ac16);
	color: var(--mfr-s-purple, #311f5a);
	text-decoration: none;
}

.mfr-support__cta[disabled] {
	cursor: progress;
	opacity: 0.65;
}

.mfr-support__cta svg {
	height: 20px;
	width: 20px;
}

/* The arrow is pushed to the far edge, so the label stays optically centred
   whatever length the config gives it. */
.mfr-support__cta-label {
	flex: 1;
	text-align: center;
}

.mfr-support__cta-icon,
.mfr-support__cta-arrow {
	display: flex;
	flex: 0 0 auto;
}

.mfr-support__cta--quiet {
	background: transparent;
	border: 1.5px solid var(--mfr-s-border, #e3e0f0);
	color: var(--mfr-s-purple, #311f5a);
	margin-top: 16px;
}

.mfr-support__cta--quiet:hover,
.mfr-support__cta--quiet:focus {
	background: var(--mfr-s-surface, #f5f4fb);
}

/* -------------------------------------------------------------------------
 * Test mode banner
 *
 * Only ever rendered while the page is pointed at Linky's demo stack (see
 * mfr_linky_api_test_mode()). Colours are literal rather than themed: the
 * point of the strip is to look like it does not belong on the page.
 * ---------------------------------------------------------------------- */

.mfr-support-form__testmode {
	background: #fff4e5;
	border: 1px solid #f0b27a;
	border-radius: 10px;
	color: #7a4a10;
	font-size: 0.85rem;
	line-height: 1.45;
	margin: 0 0 16px;
	padding: 10px 14px;
}

.mfr-support-form__testmode strong {
	color: #8a3d00;
	display: block;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * Steps
 * ---------------------------------------------------------------------- */

.mfr-support-form {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.mfr-support-form__step {
	display: flex;
	flex: 1;
	flex-direction: column;
}

/*
 * `display: flex` above beats the browser's own [hidden] rule, which is only a
 * `display: none` at user-agent weight — so without this every step renders at
 * once and the page shows the whole form stacked. The script toggles `hidden`
 * and nothing else, so this is what makes the steps steps.
 */
.mfr-support-form__step[hidden] {
	display: none;
}

.mfr-support-form__stepbar {
	align-items: center;
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
}

.mfr-support-form__back {
	align-items: center;
	background: #fff;
	border: 1.5px solid var(--mfr-s-border, #e3e0f0);
	border-radius: 50%;
	color: var(--mfr-s-purple, #311f5a);
	cursor: pointer;
	display: flex;
	flex: 0 0 36px;
	height: 36px;
	justify-content: center;
	padding: 0;
	width: 36px;
}

.mfr-support-form__back svg {
	height: 18px;
	width: 18px;
}

.mfr-support-form__steptitle {
	color: var(--mfr-s-purple, #311f5a);
	flex: 1;
	font-size: 19px;
	font-weight: 800;
	margin: 0;
	text-align: center;
	/* Balances the 36px back button so the title is centred on the panel, not
	   on the space left over beside it. */
	padding-right: 36px;
}

.mfr-support-form__progress {
	background: var(--mfr-s-border, #e3e0f0);
	border-radius: 3px;
	height: 4px;
	margin-bottom: 18px;
	overflow: hidden;
}

/*
 * Two thirds, not full.
 *
 * There are two steps on this page but three in the donation: the card step
 * happens on Linky, after the donor leaves. A full bar here would tell them
 * they had finished and then send them somewhere else to pay.
 */
.mfr-support-form__progress span {
	background: var(--mfr-s-gold, #ffc42e);
	display: block;
	height: 100%;
	width: 66%;
}

.mfr-support-form__note {
	color: var(--mfr-s-ink, #241a52);
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 14px;
}

.mfr-support-form__chosen {
	background: #fff;
	border: 1.5px solid var(--mfr-s-border, #e3e0f0);
	border-radius: 10px;
	color: var(--mfr-s-body, #5d5a77);
	font-size: 14px;
	margin: 0 0 16px;
	padding: 10px 14px;
}

.mfr-support-form__chosen strong {
	color: var(--mfr-s-ink, #241a52);
	font-size: 17px;
	font-weight: 800;
}

.mfr-support-form__field {
	margin-bottom: 14px;
}

.mfr-support-form__field label {
	color: var(--mfr-s-ink, #241a52);
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	margin-bottom: 5px;
}

.mfr-support-form__field label span {
	color: #cc2b2b;
}

.mfr-support-form__field input,
.mfr-support-form__code {
	background: #fff;
	border: 1.5px solid var(--mfr-s-border, #e3e0f0);
	border-radius: 10px;
	color: var(--mfr-s-ink, #241a52);
	font-size: 15px;
	padding: 11px 13px;
	width: 100%;
}

.mfr-support-form__field input:focus,
.mfr-support-form__code:focus {
	border-color: var(--mfr-s-purple-soft, #412d82);
	outline: 0;
}

.mfr-support-form__phone {
	display: flex;
	gap: 8px;
}

.mfr-support-form__code {
	flex: 0 0 116px;
	width: 116px;
}

.mfr-support-form__phone input {
	flex: 1;
	min-width: 0;
}

.mfr-support-form__error {
	color: #cc2b2b;
	font-size: 13px;
	margin: 6px 0 0;
}

/* -------------------------------------------------------------------------
 * Inline payment step
 *
 * The card fields themselves are in Stripe's cross-origin iframe and cannot be
 * styled from here at all — their look is set through Stripe's `appearance`
 * API in mfr-support.js. What is styled here is everything around them.
 * ---------------------------------------------------------------------- */

/* Two steps behind the donor, one to go, and this is the one. */
.mfr-support-form__progress--full span {
	width: 100%;
}

/*
 * The breakdown. It exists because Linky adds its fees on top of the donation
 * and this account has the donor paying them: somebody who chose A$25 is about
 * to be charged A$25.73, and they are told so before they type a card number.
 */
.mfr-support-pay__summary {
	background: #fff;
	border: 1.5px solid var(--mfr-s-border, #e3e0f0);
	border-radius: 12px;
	margin: 0 0 16px;
	padding: 14px 16px;
}

.mfr-support-pay__summary > div {
	align-items: baseline;
	display: flex;
	font-size: 14px;
	gap: 12px;
	justify-content: space-between;
	padding: 4px 0;
}

.mfr-support-pay__summary dt {
	color: var(--mfr-s-body, #5d5a77);
	margin: 0;
}

.mfr-support-pay__summary dd {
	color: var(--mfr-s-ink, #241a52);
	font-weight: 600;
	margin: 0;
}

.mfr-support-pay__total {
	border-top: 1px solid var(--mfr-s-border, #e3e0f0);
	margin-top: 6px;
	padding-top: 10px !important;
}

.mfr-support-pay__total dt {
	color: var(--mfr-s-ink, #241a52) !important;
	font-weight: 700;
}

.mfr-support-pay__total dd {
	font-size: 20px;
	font-weight: 800;
}

/*
 * Apple Pay / Google Pay. Hidden by default and revealed only when Stripe says
 * the device actually has a wallet — an empty slot here would read as something
 * that failed to load.
 */
.mfr-support-pay__wallet {
	margin-bottom: 16px;
}

.mfr-support-pay__or {
	align-items: center;
	color: var(--mfr-s-body, #5d5a77);
	display: flex;
	font-size: 12.5px;
	gap: 10px;
	margin: 14px 0 0;
	text-align: center;
}

.mfr-support-pay__or::before,
.mfr-support-pay__or::after {
	background: var(--mfr-s-border, #e3e0f0);
	content: "";
	flex: 1;
	height: 1px;
}

/*
 * The card form.
 *
 * Stripe renders each field as an iframe that draws only the text inside it —
 * the box around it is ours, and has to be, because CSS cannot cross into
 * their document. So the border, padding, radius and focus ring live here and
 * the type inside them is set through the `style` option in mfr-support.js.
 * The two have to be kept in step by hand; there is no way to have one drive
 * the other.
 */
.mfr-support-card {
	margin-bottom: 16px;
}

.mfr-support-card__field {
	flex: 1;
	margin-bottom: 12px;
	min-width: 0;
}

.mfr-support-card__field label {
	color: var(--mfr-s-ink, #241a52);
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	margin-bottom: 5px;
}

.mfr-support-card__row {
	display: flex;
	gap: 12px;
}

/*
 * A fixed height, not padding alone. The iframe reports its own height a beat
 * after mounting, and without a floor the boxes start collapsed and jump to
 * size as each field loads.
 */
.mfr-support-card__input {
	background: #fff;
	border: 1.5px solid var(--mfr-s-border, #e3e0f0);
	border-radius: 10px;
	min-height: 46px;
	padding: 13px;
	transition: border-color 0.15s ease;
}

/*
 * The parent theme carries `iframe, video, embed { min-height: 100px }`, which
 * is meant for embedded video and is very wrong for a card field: it forced
 * every one of these boxes to 129px tall. Stripe sizes its own iframes to the
 * line of text inside them, so the floor has to come off.
 *
 * Also the wallet button, which is an iframe too and would otherwise be a
 * 100px-tall Apple Pay button.
 *
 * Plain specificity beats the theme here — no `!important` needed, unlike the
 * amount-card radios further up, where the theme used one.
 */
.mfr-support-card__input iframe,
#mfr-support-payment-request iframe {
	min-height: 0;
}

/*
 * Stripe puts these classes on the wrapper itself as the donor types, which is
 * the only way to react to what is inside an iframe we cannot see into.
 */
.mfr-support-card__input.StripeElement--focus {
	border-color: var(--mfr-s-purple-soft, #412d82);
}

.mfr-support-card__input.StripeElement--invalid {
	border-color: #cc2b2b;
}

/* The pay button sits under the card fields, not pinned to the bottom of a
   panel whose height the event beside it decides. */
.mfr-support-form__step--pay .mfr-support__cta {
	margin-top: 8px;
}

/* Waiting and done share a centred, roomy layout. */
.mfr-support-form__step--waiting,
.mfr-support-form__step--done {
	align-items: center;
	justify-content: center;
	min-height: 320px;
	text-align: center;
}

.mfr-support-waiting__spinner {
	color: var(--mfr-s-purple-soft, #412d82);
	display: block;
	margin-bottom: 16px;
}

.mfr-support-waiting__spinner svg {
	animation: mfr-support-spin 1.1s linear infinite;
	height: 40px;
	width: 40px;
}

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

/* A donor who has asked not to see motion gets a still mark, not a still
   spinner that reads as a page which has stopped working. */
@media (prefers-reduced-motion: reduce) {
	.mfr-support-waiting__spinner svg {
		animation: none;
		opacity: 0.65;
	}
}

.mfr-support-waiting__text,
.mfr-support-done__text {
	color: var(--mfr-s-body, #5d5a77);
	font-size: 15px;
	margin: 0;
	max-width: 34ch;
}

.mfr-support-waiting__amount {
	color: var(--mfr-s-ink, #241a52);
	font-size: 28px;
	font-weight: 800;
	margin: 10px 0 0;
}

.mfr-support-done__icon {
	color: #1f8a54;
	display: block;
	margin-bottom: 12px;
}

.mfr-support-done__icon svg {
	height: 48px;
	width: 48px;
}

.mfr-support-done__title {
	color: var(--mfr-s-purple, #311f5a);
	font-size: 26px;
	font-weight: 800;
	margin: 0 0 6px;
}

.mfr-support__noscript {
	background: #fff;
	border: 1.5px solid var(--mfr-s-border, #e3e0f0);
	border-radius: 10px;
	font-size: 14px;
	margin: 0 0 14px;
	padding: 12px 14px;
}

.mfr-support__secure {
	align-items: center;
	color: var(--mfr-s-ink, #241a52);
	display: flex;
	font-size: 13.5px;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	margin: 14px 0 6px;
}

.mfr-support__secure svg {
	height: 16px;
	width: 16px;
}

.mfr-support__legal {
	color: var(--mfr-s-body, #5d5a77);
	font-size: 12.5px;
	margin: 0;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Event panel
 * ---------------------------------------------------------------------- */

/*
 * `min-height` guards the overlay. The artwork comes from Linky's CDN, and an
 * image that is slow or gone leaves this box zero pixels tall — with the
 * handwritten line absolutely positioned inside it, that means the line lands
 * on whatever follows. A floor keeps the box a box either way.
 */
.mfr-support-event__media {
	border-radius: 14px;
	margin-bottom: 16px;
	min-height: 120px;
	overflow: hidden;
	position: relative;
}

.mfr-support-event__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* No photograph configured: the handwritten line still needs a ground to sit
   on, so the box becomes a purple card rather than collapsing. */
.mfr-support-event__media--plain {
	background: var(--mfr-s-purple, #311f5a);
	min-height: 150px;
}

.mfr-support-event__overlay {
	bottom: 0;
	color: #fff;
	font-family: var(--mfr-s-script, cursive);
	font-size: clamp(20px, 2.2vw, 28px);
	left: 0;
	line-height: 1.15;
	margin: 0;
	padding: 18px;
	position: absolute;
	right: 0;
	/* Only over a photo does the text need protecting from it. */
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.mfr-support-event__media--plain .mfr-support-event__overlay {
	text-shadow: none;
}

/*
 * The event's own name, between the photograph and its details. It is not in
 * the design's original comp because that comp had one hard-coded evening; with
 * the panel reading whatever is next off the Linky store, the name is what
 * tells a visitor which evening they are looking at.
 */
.mfr-support-event__name {
	color: var(--mfr-s-purple, #311f5a);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 10px;
}

.mfr-support-event__empty {
	color: var(--mfr-s-body, #5d5a77);
	font-size: 14px;
	margin-bottom: 18px;
}

.mfr-support-event__empty p {
	margin: 0;
}

/*
 * The two buttons. `margin-top: auto` moves from the buttons to this box, so
 * the pair is pushed to the bottom of the panel as one block and they do not
 * space themselves apart.
 */
.mfr-support-event__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: auto;
}

.mfr-support-event__actions .mfr-support__cta {
	margin-top: 0;
}

/*
 * The secondary button sits on cream rather than on the panel white the quiet
 * style assumes, so it takes the cream's own border and hover.
 */
.mfr-support-event__all {
	background: #fff;
	border-color: var(--mfr-s-cream-line, #f3e4b8);
}

.mfr-support-event__all:hover,
.mfr-support-event__all:focus {
	background: var(--mfr-s-cream, #fdf7e6);
	border-color: var(--mfr-s-gold-deep, #e8ac16);
}

.mfr-support-event__details {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.mfr-support-event__details li {
	align-items: flex-start;
	display: flex;
	font-size: 13.5px;
	gap: 12px;
	padding: 9px 0;
}

.mfr-support-event__details strong {
	color: var(--mfr-s-ink, #241a52);
	display: block;
	font-size: 14.5px;
}

.mfr-support-event__icon {
	align-items: center;
	background: #fff;
	border: 1px solid var(--mfr-s-cream-line, #f3e4b8);
	border-radius: 9px;
	color: var(--mfr-s-purple, #311f5a);
	display: flex;
	flex: 0 0 36px;
	height: 36px;
	justify-content: center;
	width: 36px;
}

.mfr-support-event__icon svg {
	height: 18px;
	width: 18px;
}

/* -------------------------------------------------------------------------
 * Footer strip
 * ---------------------------------------------------------------------- */

.mfr-support__footer {
	align-items: center;
	border-top: 1px solid var(--mfr-s-border, #e3e0f0);
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	margin-top: 24px;
	padding-top: 18px;
}

.mfr-support__footer-script {
	color: var(--mfr-s-purple, #311f5a);
	flex: 1;
	font-family: var(--mfr-s-script, cursive);
	font-size: 30px;
	margin: 0;
	min-width: 240px;
	text-align: center;
}

/* Centred under the line, and about the width of its last few words. In `em`
   for the same reason as the signature above. */
.mfr-support__footer-script .mfr-support__swash {
	margin-left: auto;
	margin-right: auto;
	width: 6.3em;
}

.mfr-support__footer-links {
	align-items: center;
	display: flex;
	gap: 16px;
}

.mfr-support__footer-site {
	color: var(--mfr-s-ink, #241a52);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.mfr-support__footer-site:hover {
	text-decoration: underline;
}

.mfr-support__social {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mfr-support__social a {
	align-items: center;
	color: var(--mfr-s-purple, #311f5a);
	display: flex;
	height: 30px;
	justify-content: center;
	width: 30px;
}

.mfr-support__social svg {
	height: 26px;
	width: 26px;
}

/* -------------------------------------------------------------------------
 * Thank-you page
 * ---------------------------------------------------------------------- */

.mfr-thanks {
	background: #fff;
	color: var(--mfr-s-body, #5d5a77);
	padding: 56px 20px 72px;
}

.mfr-thanks__card {
	background: #fff;
	border: 1px solid var(--mfr-s-border, #e3e0f0);
	border-radius: 26px;
	box-shadow: 0 18px 60px rgba(36, 26, 82, 0.08);
	margin: 0 auto;
	max-width: 620px;
	padding: 44px 34px 38px;
	text-align: center;
}

.mfr-thanks__icon {
	display: block;
	margin: 0 auto 16px;
}

.mfr-thanks__icon svg {
	height: 60px;
	width: 60px;
}

.mfr-thanks__card--paid .mfr-thanks__icon {
	color: #1f8a54;
}

.mfr-thanks__card--pending .mfr-thanks__icon {
	color: var(--mfr-s-gold-deep, #e8ac16);
}

.mfr-thanks__card--unknown .mfr-thanks__icon {
	color: var(--mfr-s-body, #5d5a77);
}

.mfr-thanks__title {
	color: var(--mfr-s-purple, #311f5a);
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 800;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.mfr-thanks__text {
	font-size: 16px;
	margin: 0 auto 20px;
	max-width: 44ch;
}

.mfr-thanks__amount {
	background: var(--mfr-s-surface, #f5f4fb);
	border: 1.5px solid var(--mfr-s-border, #e3e0f0);
	border-radius: 14px;
	color: var(--mfr-s-ink, #241a52);
	display: inline-block;
	font-size: 30px;
	font-weight: 800;
	margin-bottom: 22px;
	padding: 12px 26px;
}

/*
 * The Transaction ID. Monospaced and boxed because it is a string somebody
 * may have to read out or copy, and it is the only proof of payment this route
 * gives the donor — see the note in page-donation-thank-you.php.
 */
.mfr-thanks__reference {
	background: var(--mfr-s-surface, #f5f4fb);
	border: 1px dashed var(--mfr-s-border, #e3e0f0);
	border-radius: 10px;
	color: var(--mfr-s-body, #5d5a77);
	font-size: 12.5px;
	letter-spacing: 0.04em;
	margin: 0 auto 18px;
	max-width: 100%;
	padding: 10px 14px;
	text-transform: uppercase;
}

.mfr-thanks__reference strong {
	color: var(--mfr-s-ink, #241a52);
	display: block;
	margin-top: 5px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 15px;
	letter-spacing: 0;
	/* A long token must wrap rather than push the card wide on a phone. */
	overflow-wrap: anywhere;
	text-transform: none;
}

.mfr-thanks__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.mfr-thanks__actions .mfr-support__cta {
	margin-top: 0;
	width: auto;
}

.mfr-thanks__legal {
	border-top: 1px solid var(--mfr-s-border, #e3e0f0);
	color: var(--mfr-s-body, #5d5a77);
	font-size: 12.5px;
	margin: 26px 0 0;
	padding-top: 16px;
}

/* -------------------------------------------------------------------------
 * Narrower screens
 *
 * Two stages. The panels stack first, at the point where two columns of amount
 * cards and an event photograph stop fitting side by side; the rail keeps its
 * width for a while after that because it still reads well narrow.
 * ---------------------------------------------------------------------- */

@media (max-width: 1180px) {
	.mfr-support__panels {
		grid-template-columns: minmax(0, 1fr);
	}

	.mfr-support__panels--single {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 900px) {
	.mfr-support {
		padding: 24px 14px 44px;
	}

	.mfr-support__card {
		grid-template-columns: minmax(0, 1fr);
	}

	.mfr-support__rail {
		border-bottom: 1px solid var(--mfr-s-border, #e3e0f0);
		border-right: 0;
		padding: 26px 22px 22px;
	}

	/*
	 * Above the fold on a phone belongs to the donation form, not to four
	 * reassurances — so on the stacked layout the rail keeps the portrait and
	 * the name plate and drops the list. The same four points are made on the
	 * home page, and this page's job is to take a donation.
	 */
	.mfr-support__trust {
		display: none;
	}

	.mfr-support__portrait {
		margin: 0 auto 18px;
		max-width: 300px;
	}

	/*
	 * The rail stops being a left-hand column here and becomes a full-width
	 * band across the top, with the portrait and the name plate both centred
	 * in it. Left-aligned, the signature and its flourish are stranded against
	 * one edge of that band, so they come to the middle with everything else.
	 */
	.mfr-support__signature {
		text-align: center;
		/* Centred at this size, so it turns about its middle rather than its
		   left edge, which would swing it off to one side. */
		transform-origin: center center;
	}

	.mfr-support__signature .mfr-support__swash {
		margin-left: auto;
		margin-right: auto;
	}

	.mfr-support__main {
		padding: 26px 20px 22px;
	}
}

@media (max-width: 560px) {
	.mfr-support__panel {
		padding: 18px 16px;
	}

	.mfr-support-form__amounts {
		gap: 10px;
	}

	/* Still two columns — a pair of cards reads well even at 320px — but the
	   odd one at the end takes the full width here instead of being centred at
	   half of it, which at this size would be a card too narrow for its
	   caption. */
	.mfr-support-amount:last-child:nth-of-type(odd) {
		margin: 0;
		width: auto;
	}

	.mfr-support-custom {
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.mfr-support-custom__field {
		width: 100%;
	}

	.mfr-support-custom__input {
		max-width: none;
		width: 100%;
	}

	.mfr-support__name {
		font-size: 34px;
	}

	.mfr-support__footer {
		justify-content: center;
	}

	.mfr-support__footer-script {
		font-size: 26px;
	}

	.mfr-thanks__card {
		padding: 32px 20px 28px;
	}
}