/*=========================
	VIC DONATION FORM BLOCK — styling copies the live form look
	(grey rounded radio "buttons", orange selected, green step bar).
=========================*/
[x-cloak] {
	display: none !important;
}

.block-donation-vic .container {
	max-width: 997px;
} /* 805px live form width + 2×96px container padding */
/* Form column capped at 805px like live; the steps bar spans the full container. */
.block-donation-vic .gd-donation-form {
	max-width: 805px;
	margin: 0 auto;
}
/* Intro heading inside step 1 (e.g. Betty Amsden) — centred like live. */
.block-donation-vic .section__heading {
	text-align: center;
	margin: 0 auto 32px;
}
/* Progress / Previous buttons: full-size like live (single line, wider). */
.block-donation-vic .donate-actions .c-btn {
	white-space: nowrap;
	padding: 20px 36px !important;
	font-size: 20px !important;
	height: auto !important;
}

/* ---- Step indicator — QLD donate-block styling (full-bleed grey band,
   pulsing green active dot, green connectors), from blocks/donate/donate.css. ---- */
.block-donation-vic .donate-steps {
	display: flex;
	list-style: none;
	margin: 0 0 40px;
	padding: 40px 0;
	position: relative;
	background: transparent;
}
.block-donation-vic .donate-steps::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	background: #f4f4f6;
	z-index: 0;
}
.block-donation-vic .donate-step {
	flex: 1 1 0;
	text-align: center;
	position: relative;
	z-index: 1;
	padding: 0 12px;
	color: #69696a;
}
.block-donation-vic .donate-step::before {
	content: "";
	position: absolute;
	top: 10.5px;
	left: calc(-50% + 42px);
	width: calc(100% - 84px);
	height: 3px;
	background: #d7d7db;
	z-index: 0;
}
.block-donation-vic .donate-step:first-child::before {
	display: none;
}
.block-donation-vic .donate-step__dot {
	display: inline-flex;
	width: 24px;
	height: 24px;
	margin: 0 auto 10px;
	border-radius: 50%;
	background: #a7a7a9;
	position: relative;
	z-index: 1;
	transition: background 0.25s ease;
}
.block-donation-vic .donate-step.is-active .donate-step__dot {
	background: #01b483;
}
.block-donation-vic .donate-step.is-active .donate-step__dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #01b483;
	animation: donate-dot-heartbeat 1.4s ease-out infinite;
}
@keyframes donate-dot-heartbeat {
	0% {
		transform: scale(1);
		opacity: 0.7;
	}
	100% {
		transform: scale(2.4);
		opacity: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.block-donation-vic .donate-step.is-active .donate-step__dot::after {
		animation: none;
	}
}
.block-donation-vic .donate-step.is-done .donate-step__dot {
	background: #01b483;
}
/* Completed step: white check inside the green circle, like live's stepper
   (a step is never both is-done and is-active, so no clash with the
   heartbeat ::after above). */
.block-donation-vic .donate-step.is-done .donate-step__dot::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
}
.block-donation-vic .donate-step.is-done::before,
.block-donation-vic .donate-step.is-active::before {
	background: #01b483;
}
.block-donation-vic .donate-step__num {
	display: block;
	font-size: 16px;
	color: #282829;
}
.block-donation-vic .donate-step__label {
	display: block;
	font-size: 22px;
}
.block-donation-vic .donate-step.is-active .donate-step__label {
	color: #282829;
	font-weight: 700;
}
@media (max-width: 600px) {
	/* LIVE-PARITY mobile stepper (form-stepper__step__mobile pattern): the dots
	   row keeps both dots, but the per-step "Step N / label" text is hidden and
	   ONLY the ACTIVE step's text renders, absolutely positioned and centered
	   across the full bar below the dots. No connector line on mobile (live
	   shows none). The .is-active twins also out-specify donate.css's unscoped
	   `.donate-step.is-active .donate-step__label { font-size: 22px }`. */
	/* sizes measured off live at 469px: dots 24px (unchanged from desktop),
	   "Step N" 18px/300, label 24px/700, 28px gap below the dots, 40px band
	   padding (live .form-stepper: padding 40px, state 24×24, mobile spans
	   18px/300 + 24px/700, margin-top 28px). */
	.block-donation-vic .donate-steps {
		padding: 40px 0 119px;   /* 40 + text block (~51) + 28 gap */
		position: relative;
	}
	.block-donation-vic .donate-step {
		position: static;   /* active text anchors to the ol, not the li */
	}
	.block-donation-vic .donate-step::before {
		display: none;      /* no connector line on mobile, like live */
	}
	.block-donation-vic .donate-step__num,
	.block-donation-vic .donate-step__label,
	.block-donation-vic .donate-step.is-active .donate-step__label {
		display: none;
	}
	.block-donation-vic .donate-step.is-active .donate-step__num {
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: 92px;          /* 40 pad + 24 dot + 28 gap */
		text-align: center;
		font-size: 18px;
		font-weight: 300;
	}
	.block-donation-vic .donate-step.is-active .donate-step__label {
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: 117px;
		text-align: center;
		font-size: 24px;
		font-weight: 700;
	}
}

/* ---- Panes ---- */
.block-donation-vic .donate-form__step {
	border: 0;
	margin: 0;
	padding: 0;
	display: none;
}
.block-donation-vic .donate-form__step.is-active {
	display: block;
}

.block-donation-vic .form__row {
	margin-bottom: 28px;
}
.block-donation-vic .weight-700 {
	font-weight: 700;
	font-size: 20px;
	margin: 0 0 8px;
} /* live legends: 20px/700, 8px below */
.block-donation-vic .row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
@media (max-width: 600px) {
	.block-donation-vic .row {
		grid-template-columns: 1fr;
	}
}
.block-donation-vic .row.donate-actions {
	align-items: center;
}
/* The live markup's col-xs-16/col-sm-8 divs carry the guidedogs grid widths —
   override so each fills its grid cell (radio cards match live's half-width). */
.block-donation-vic .row > [class*="col-"] {
	width: 100% !important;
	max-width: none !important;
	flex: 0 0 auto !important;
	padding: 0 !important;
	margin: 0 !important;
}
.block-donation-vic .gd-radio.radio--btn {
	width: 100% !important;
}

/* ---- Radio "buttons" (grey card → orange when selected) ---- */
.block-donation-vic .gd-radio.radio--btn {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%; /* fill the grid column, like live */
	box-sizing: border-box;
	min-height: 90px; /* live card height */
	padding: 15px 20px 15px 24px;
	background: #f6f6f8;
	border: 4px solid transparent; /* live: 4px, transparent when inactive */
	border-radius: 10px;
	cursor: pointer;
	transition:
		border-color 0.2s,
		background 0.2s;
}
.block-donation-vic .gd-radio.radio--btn:hover {
	border-color: #d7d7db;
}
.block-donation-vic .gd-radio.radio--btn input {
	appearance: none;
	-webkit-appearance: none;
	width: 24px;
	height: 24px;
	margin: 0;
	border: 2px solid #a7a7a9;
	border-radius: 50%;
	background: #fff;
	flex-shrink: 0;
	cursor: pointer;
	transition: border-color 0.2s;
}
.block-donation-vic .gd-radio.radio--btn input:checked {
	border-color: #ff6e33;
	background: radial-gradient(#ff6e33 0 45%, #fff 52%);
}
/* NB: every checked-state rule also carries an `.is-checked` twin — donation-vic.js
   syncs that class on the labels because Chrome doesn't reliably re-evaluate
   `:has(input:checked)` when a radio is IMPLICITLY unchecked by its group. */
.block-donation-vic .gd-radio.radio--btn:has(input:checked),
.block-donation-vic .gd-radio.radio--btn.is-checked {
	border-color: #ff6e33;
	background: #fff;
}
.block-donation-vic .gd-radio__label {
	font-weight: 700;
	font-size: 20px;
	color: #282829;
} /* live: 20px */

/* ---- "How much would you like to donate?" amount cards ----
   Only rendered by the donation-vic-amounts block (has .donate-amounts); inert on
   the plain form. 4-across preset cards (white, orange when selected) + a full-width
   "Choose your own amount" card. The live per-card illustration is a heavy
   JS-injected animated SVG (~10-40KB each) and is intentionally omitted. */
.block-donation-vic .donate-amounts {
	margin-bottom: 28px;
}
.block-donation-vic .donate-amounts > .weight-700 {
	font-weight: 700;
	font-size: 20px;
	margin: 0 0 8px;
}
.block-donation-vic .donate-amounts__req {
	color: #ff6e33;
}

.block-donation-vic .row--amounts {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	grid-template-columns: none;
	padding-top: 26px;
}
.block-donation-vic .row--amounts > [class*="col-"] {
	width: auto !important;
	flex: 1 1 calc(25% - 12px) !important;
	max-width: none !important;
	min-width: 0;
	padding: 0 !important;
	margin: 0 !important;
}
.block-donation-vic .row--amounts > .donate-amount-col--own {
	flex: 1 1 100% !important;
	margin-top: 20px !important;   /* extra breathing room above the "Choose your own amount" card */
}
/* Equal-height preset cards regardless of description length. */
.block-donation-vic .row--amounts > [class*="col-"] {
	display: flex;
}
.block-donation-vic .row--amounts .donate-amount-col:not(.donate-amount-col--own) .gd-radio.radio--btn {
	height: 100%;
}
@media (max-width: 768px) {
	.block-donation-vic .row--amounts > [class*="col-"] {
		flex: 1 1 calc(50% - 8px) !important;
	}
}

/* 3-across variant — live `col-sm-thirds` grid (e.g. /dress-the-dog/: $1,500 /
   $3,000 / Other all equal cards, stacked full-width on mobile). */
.block-donation-vic .row--amounts.row--thirds > [class*="col-"] {
	flex: 1 1 calc(33.333% - 11px) !important;
}
@media (max-width: 768px) {
	.block-donation-vic .row--amounts.row--thirds > [class*="col-"] {
		flex: 1 1 100% !important;
	}
}

/* Preset amount card — matches live `.dollar-handles-dark .gd-radio__label`:
   white, 4px transparent border + 2px grey outline (orange 4px border when checked). */
.block-donation-vic .row--amounts .donate-amount-col:not(.donate-amount-col--own) .gd-radio.radio--btn {
	position: relative;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	text-align: center;
	width: 100%;
	background: #fff;
	border: 4px solid transparent;
	outline: 2px solid #e9e9e7;
	border-radius: 10px;
	padding: 20px;
	gap: 0;
	transition:
		border 0.3s cubic-bezier(0.4, 0, 0, 1),
		background 0.3s cubic-bezier(0.4, 0, 0, 1);
}
.block-donation-vic .row--amounts .donate-amount-col:not(.donate-amount-col--own) .gd-radio.radio--btn:hover {
	border: 4px solid #a7a7a9;
}
.block-donation-vic .row--amounts .donate-amount-col:not(.donate-amount-col--own) .gd-radio.radio--btn:has(input:checked),
.block-donation-vic .row--amounts .donate-amount-col:not(.donate-amount-col--own) .gd-radio.radio--btn.is-checked {
	border: 4px solid #ff6e33;
	background: #fff;
}
.block-donation-vic .row--amounts .donate-amount-col:not(.donate-amount-col--own) .gd-radio__label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 100%;
}

/* Icons — live sizes them at 12.8rem (128px). */
.block-donation-vic .gd-radio__anim-icon {
	display: block;
	width: 128px;
	height: 128px;
	margin: 0 auto 5px;
}
.block-donation-vic .gd-radio__anim-icon svg {
	display: block;
	width: 100% !important;
	height: 100% !important;
}
.block-donation-vic .gd-radio__static-icon {
	display: block;
	width: 128px;
	height: 128px;
	margin: 0 auto 5px;
	color: #282829;
}
.block-donation-vic .gd-radio__static-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Radio indicator — live: 30px outline (#d2d2d2) + 20px fill, orange when checked. */
.block-donation-vic .donate-amounts .gd-radio input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
}
.block-donation-vic .donate-radio-container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: 0 auto;
}
.block-donation-vic .donate-radio-outline {
	display: block;
	width: 30px;
	height: 30px;
	border: 2px solid #d2d2d2;
	border-radius: 50%;
	box-sizing: border-box;
	background: transparent;
	transition: border 0.3s ease;
}
.block-donation-vic .donate-radio-fill {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border-radius: 50%;
	background: transparent;
	transform: scale(0);
	transition: transform 0.2s ease-out;
}
.block-donation-vic .donate-amounts .gd-radio:has(input:checked) .donate-radio-outline,
.block-donation-vic .donate-amounts .gd-radio.is-checked .donate-radio-outline {
	border-color: #ff6e33;
}
.block-donation-vic .donate-amounts .gd-radio:has(input:checked) .donate-radio-fill,
.block-donation-vic .donate-amounts .gd-radio.is-checked .donate-radio-fill {
	background: #ff6e33;
	transform: scale(1);
}

/* Price — live: 20px/600, grows to 24px/700 when selected. */
.block-donation-vic .gd-radio__price {
	margin: 0;
	line-height: 30px;
}
.block-donation-vic .gd-radio__price b {
	font-size: 20px;
	font-weight: 600;
	color: #282829;
	line-height: 30px;
}
.block-donation-vic .row--amounts .gd-radio:has(input:checked) .gd-radio__price b,
.block-donation-vic .row--amounts .gd-radio.is-checked .gd-radio__price b {
	font-size: 24px;
	font-weight: 700;
}
.block-donation-vic .gd-radio__price-suffix {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: #69696a;
}
.block-donation-vic .gd-radio__summary {
	line-height: 1;
}
/* Summary — live: 1.6rem (16px) via u-text-xs. */
.block-donation-vic .gd-radio__summary small {
	font-size: 16px;
	font-weight: 400;
	color: #545456;
	line-height: 1.35;
}

/* ---- List layout (one card per row) — live's `gd-radio--longform` for pages with
   long impact copy (e.g. Betty Amsden). Horizontal: radio, icon, price, summary. ---- */
.block-donation-vic.donate-amounts-list .row--amounts {
	flex-direction: column;
	padding-top: 0;
}
.block-donation-vic.donate-amounts-list .row--amounts > [class*="col-"] {
	flex: 1 1 100% !important;
	width: 100% !important;
}
.block-donation-vic.donate-amounts-list .row--amounts .donate-amount-col:not(.donate-amount-col--own) .gd-radio.radio--btn {
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	padding: 18px 28px;
	gap: 24px;
}
.block-donation-vic.donate-amounts-list .row--amounts .donate-amount-col:not(.donate-amount-col--own) .gd-radio__label {
	flex-direction: row;
	align-items: center;
	gap: 24px;
	width: 100%;
}
.block-donation-vic.donate-amounts-list .donate-radio-container {
	flex: 0 0 30px;
	margin: 0;
}
.block-donation-vic.donate-amounts-list .gd-radio__anim-icon,
.block-donation-vic.donate-amounts-list .gd-radio__static-icon {
	width: 110px;
	height: 110px;
	margin: 0;
	flex: 0 0 110px;
}
.block-donation-vic.donate-amounts-list .gd-radio__price {
	flex: 0 0 170px;
	width: 170px;
	margin: 0;
	text-align: center;
}
.block-donation-vic.donate-amounts-list .gd-radio__price b {
	font-size: 40px;
	line-height: 1.1;
}
.block-donation-vic.donate-amounts-list .row--amounts .gd-radio:has(input:checked) .gd-radio__price b {
	font-size: 40px;
}
.block-donation-vic.donate-amounts-list .gd-radio__summary {
	flex: 1 1 auto;
	text-align: left;
}
.block-donation-vic.donate-amounts-list .gd-radio__summary small {
	text-align: left;
}
/* Mobile (< 768px, live's 48em breakpoint): the horizontal row (radio · icon ·
   price · summary) is too cramped, so match live and switch to a 3-column grid —
   radio | icon-stacked-over-price | summary. */
@media (max-width: 767.98px) {
	.block-donation-vic.donate-amounts-list .row--amounts .donate-amount-col:not(.donate-amount-col--own) .gd-radio.radio--btn {
		padding: 16px 20px;
	}
	.block-donation-vic.donate-amounts-list .row--amounts .donate-amount-col:not(.donate-amount-col--own) .gd-radio__label {
		display: grid;
		grid-template-areas:
			"radio icon summary"
			"radio price summary";
		grid-template-columns: auto 72px minmax(0, 1fr);
		grid-template-rows: auto auto;
		column-gap: 14px;
		row-gap: 0;
		align-items: center;
		width: 100%;
	}
	.block-donation-vic.donate-amounts-list .donate-radio-container {
		grid-area: radio;
		flex: 0 0 auto;
		align-self: center;
	}
	.block-donation-vic.donate-amounts-list .gd-radio__anim-icon,
	.block-donation-vic.donate-amounts-list .gd-radio__static-icon {
		grid-area: icon;
		width: 72px;
		height: 72px;
		flex: 0 0 auto;
		align-self: end;
		justify-self: center;
		margin: 0;
	}
	.block-donation-vic.donate-amounts-list .gd-radio__price {
		grid-area: price;
		width: auto;
		flex: 0 0 auto;
		align-self: start;
		text-align: center;
		margin: 0;
	}
	.block-donation-vic.donate-amounts-list .gd-radio__price b {
		font-size: 24px;
	}
	.block-donation-vic.donate-amounts-list .gd-radio__summary {
		grid-area: summary;
		align-self: center;
	}
}

/* ---- Compact list variant (live `gd-radio--compact gd-radio--longform`, used on
   appeal landings): grid of [radio 30px | icon-over-price | summary 1fr] — the
   64px icon sits ON TOP of the 24px price in one narrow centre column, and the
   summary copy takes the remaining width. Measured 1:1 from live
   /appeals/tax-appeal-fy26-dig/ (grid 30px/97px/1fr, gap 20px, rows 69px/27px). ---- */
.single-appeal .block-donation-vic.donate-amounts-list .row--amounts .donate-amount-col:not(.donate-amount-col--own) .gd-radio__label {
	display: grid;
	grid-template-columns: 30px minmax(64px, auto) 1fr;
	grid-template-areas:
		"radio icon  summary"
		"radio price summary";
	column-gap: 20px;
	row-gap: 0;
	align-items: center;
}
.single-appeal .block-donation-vic.donate-amounts-list .row--amounts .donate-amount-col:not(.donate-amount-col--own) .donate-radio-container {
	grid-area: radio;
}
.single-appeal .block-donation-vic.donate-amounts-list .row--amounts .donate-amount-col:not(.donate-amount-col--own) .gd-radio__anim-icon,
.single-appeal .block-donation-vic.donate-amounts-list .row--amounts .donate-amount-col:not(.donate-amount-col--own) .gd-radio__static-icon {
	grid-area: icon;
	width: 64px;
	height: 64px;
	flex: none;
	justify-self: center;
	align-self: end;
}
.single-appeal .block-donation-vic.donate-amounts-list .row--amounts .donate-amount-col:not(.donate-amount-col--own) .gd-radio__price {
	grid-area: price;
	width: auto;
	flex: none;
	text-align: center;
	align-self: start;
}
.single-appeal .block-donation-vic.donate-amounts-list .gd-radio__price b,
.single-appeal .block-donation-vic.donate-amounts-list .row--amounts .gd-radio:has(input:checked) .gd-radio__price b {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.13;
}
.single-appeal .block-donation-vic.donate-amounts-list .row--amounts .donate-amount-col:not(.donate-amount-col--own) .gd-radio__summary {
	grid-area: summary;
}
.single-appeal .block-donation-vic.donate-amounts-list .row--amounts .donate-amount-col:not(.donate-amount-col--own) .gd-radio.radio--btn {
	padding: 20px 32px;
}

/* ---- Appeal footer strip (live .donation__footer--appeal): grey #e5e5e5 bar,
   56px, flush with the card's bottom edge — Secure Payment (padlock + ⓘ) left,
   Visa/Amex/Mastercard 36px logos right, space-around. ---- */
.donation__footer--appeal {
	display: flex;
	justify-content: space-around;
	align-items: center;
	min-height: 56px;
	background: #e5e5e5;
	border-radius: 0 0 16px 16px;   /* card radius */
	margin: 2.4rem -3rem -3rem;     /* escape the card's 3rem padding */
}
.donation__footer--appeal .security-statement--appeal {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.donation__footer--appeal .security-statement--appeal p { margin: 0; font-size: 16px; font-weight: 700; }
.donation__footer--appeal .security-statement--appeal .c-icon,
.donation__footer--appeal .security-statement--appeal .c-icon svg {
	width: 24px;
	height: 24px;
	display: block;
	margin: 0;
}
.donation__footer--appeal .appeal-secure-info { display: block; opacity: .7; }
/* beat the later .block-donation-vic .payment-icons band styles (grey bg, 58px icons) */
.block-donation-vic .donation__footer--appeal .payment-icons {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	background: none;
	gap: 12px;
	flex-wrap: nowrap;
}
.block-donation-vic .donation__footer--appeal .payment-icons .c-icon svg,
.block-donation-vic .donation__footer--appeal .payment-icons--desktop .c-icon svg {
	width: 36px;
	height: 36px;
	display: block;
}
.block-donation-vic .donation__footer--appeal .payment-icons--mobile { display: none; }
/* button row: live = light-blue (#93ccf2 overlay) "Next step", right-aligned */
.block-donation-vic .row.donate-actions--appeal {
	display: flex;
	justify-content: flex-end;
}
.block-donation-vic .donate-actions--appeal .c-btn--primary,
.block-donation-vic .donate-actions--appeal .c-btn--primary::before {
	background: #93ccf2 !important;
	border-color: transparent !important;
}

/* "Most popular"-style badge (rendered from data-preferred): grey → orange selected. */
.block-donation-vic .row--amounts .gd-radio.radio--btn[data-preferred]::before {
	content: attr(data-preferred);
	position: absolute;
	left: 50%;
	top: -34px;
	transform: translateX(-50%);
	display: block;
	width: calc(100% - 8px);
	box-sizing: border-box;
	background: #e9e9e7;
	color: #282829;
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
	height: 32px;
	padding: 5px 10px;
	border-radius: 10px 10px 0 0;
	text-align: center;
	transition: background-color 0.3s ease-out;
}
.block-donation-vic .row--amounts .gd-radio.radio--btn[data-preferred]:has(input:checked)::before,
.block-donation-vic .row--amounts .gd-radio.radio--btn.is-checked[data-preferred]::before {
	background: #ff6e33;
	color: #fff;
}

/* "Highest Impact" tab on the Monthly frequency toggle (live data-preferred). Same
   badge component as the amount cards: grey tab → orange when Monthly is selected. */
.block-donation-vic .gd-radio.radio--btn.gd-radio--type[data-preferred] {
	position: relative;
	overflow: visible;
}
.block-donation-vic .gd-radio.radio--btn.gd-radio--type[data-preferred]::before {
	content: attr(data-preferred);
	position: absolute;
	left: 50%;
	top: -34px;
	transform: translateX(-50%);
	display: block;
	width: calc(100% - 8px);
	box-sizing: border-box;
	background: #e9e9e7;
	color: #282829;
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
	height: 32px;
	padding: 5px 10px;
	border-radius: 10px 10px 0 0;
	text-align: center;
	transition: background-color 0.3s ease-out;
}
.block-donation-vic .gd-radio.radio--btn.gd-radio--type[data-preferred]:has(input:checked)::before,
.block-donation-vic .gd-radio.radio--btn.gd-radio--type.is-checked[data-preferred]::before {
	background: #ff6e33;
	color: #fff;
}
/* room above the One-off / Monthly toggle so the tab doesn't clip the heading */
.block-donation-vic .row:has(.gd-radio--type[data-preferred]) {
	margin-top: 40px;
}

/* "Choose your own amount" — full-width grey card, radio on left. */
.block-donation-vic .donate-amount-col--own .gd-radio.radio--btn {
	flex-direction: row;
	align-items: center;
	text-align: left;
	gap: 16px;
	width: 100%;
	min-height: 78px;
	background: #f6f6f8;
	border: 2px solid transparent;
	border-radius: 10px;
	padding: 16px 24px;
}
.block-donation-vic .donate-amount-col--own .gd-radio:has(input:checked),
.block-donation-vic .donate-amount-col--own .gd-radio.is-checked {
	border-color: #ff6e33;
	background: #fff;
}
/* Keep the radio circle and the text on ONE row (circle left, text right). */
.block-donation-vic .donate-amount-col--own .gd-radio__label {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	width: 100%;
}
.block-donation-vic .donate-amount-col--own .donate-radio-container {
	margin: 0;
}
.block-donation-vic .donate-own-text b {
	display: block;
	font-weight: 600;   /* live is semibold, not heavy 700 (Proxima Nova) */
	font-size: 20px;
	line-height: 1.2;   /* tighten so the subtext sits close beneath */
	color: #282829;
}
.block-donation-vic .donate-own-text small {
	color: #69696a;
	font-size: 14px;
	font-weight: 400;
	display: block;
	line-height: 1.2;
	margin-top: 2px;   /* sit close beneath the heading, not a full line away */
}
/* List-layout own card: darker, larger, regular-weight subtext (matches live). */
.block-donation-vic .donate-amounts-list .donate-own-text small {
	font-size: 16px;
	color: #282829;
	font-weight: 400;
}

/* ---- Amount input ---- */
.block-donation-vic .form__row--currency label {
	display: block;
	font-weight: 700;
	margin-bottom: 8px;
}
.block-donation-vic .form__row--currency small {
	font-weight: 400;
	color: #69696a;
}
.block-donation-vic .currency {
	position: relative;
	display: block;
}
.block-donation-vic .currency::before {
	content: "$";
	position: absolute;
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
	color: #282829;
	font-size: 20px;
	z-index: 1;
	pointer-events: none;
}
/* Match live: grey fill, 2px border, SQUARE corners, 20px text. */
.block-donation-vic #other-amount,
.block-donation-vic #company-name {
	width: 100%;
	box-sizing: border-box;
	border: 2px solid #e9e9e7;
	background: #f6f6f8;
	border-radius: 0;
	padding: 15px 20px;
	font-size: 20px;
	line-height: 1.3;
	color: #282829;
}
.block-donation-vic #other-amount {
	padding-left: 64px;
}
.block-donation-vic #other-amount:focus,
.block-donation-vic #company-name:focus {
	outline: none;
	border-color: #a7a7a9;
}
.block-donation-vic .u-text-sm {
	font-size: 14px;
	color: #69696a;
	margin-top: 10px;
}
.block-donation-vic .error {
	color: #c0392b;
	font-weight: 600;
}

/* ---- Payment icons (real SVG sprite symbols, copied from live) ---- */
/* Reverse so the grey icons band sits BELOW the Secure Payment / button row,
   with a gap before the "Questions?" text (live: 48px). */
.block-donation-vic .payment-logs--reverse {
	display: flex;
	flex-direction: column-reverse;
	margin-bottom: 48px;
}
.block-donation-vic .payment-icons {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	background: #f1f1f3;
	padding: 10px 0;
}
.block-donation-vic .payment-icons .c-icon {
	display: inline-flex;
	line-height: 0;
}
.block-donation-vic .payment-icons--desktop .c-icon svg {
	height: 58px;
	width: 58px;
}
.block-donation-vic .payment-icons--mobile .c-icon svg {
	height: 24px;
	width: 24px;
}
.block-donation-vic .payment-icons--mobile {
	display: none;
}
@media (max-width: 600px) {
	.block-donation-vic .payment-icons--desktop {
		display: none;
	}
	.block-donation-vic .payment-icons--mobile {
		display: flex;
		gap: 12px;
	}
}
/* Security statement */
.block-donation-vic .security-statement--left {
	display: flex;
	align-items: center;
	gap: 10px;
}
.block-donation-vic .security-statement--left p {
	margin: 0;
	font-weight: 700;
}
.block-donation-vic .security-statement--left .icon-Security svg {
	height: 26px;
	width: 26px;
}
/* Button arrow icons from the sprite */
.block-donation-vic .c-btn .c-icon svg {
	height: 18px;
	width: 18px;
	display: block;
}
/* Space between the left arrow icon and the button label (Previous) */
.block-donation-vic .c-btn--icon-left .c-btn__icon {
	margin-right: 10px;
}

/* ---- Payment iframe ---- */
.block-donation-vic .donation-iframe-wrap {
	margin-top: 16px;
}
.block-donation-vic .donation__iframe {
	width: 100%;
	/* Live inlines height:3350px on the EMPTY iframe but 3400px once the
	   Salesforce checkout is loaded — at 3350 the checkout content overflows
	   and shows an inner vertical scrollbar. Match live's loaded height. */
	height: 3400px;
	border: 0;
}
.block-donation-vic .ddsa-message a {
	text-decoration: underline;
}
/* Inline text links (Call / email / T&Cs) render as clear links. */
.block-donation-vic .form__row p a {
	color: #282829;
	text-decoration: underline;
	font-weight: 600;
}
.block-donation-vic .form__row p a:hover {
	color: #ff6e33;
}

/* ── List layout (live /get-involved/donations/ + children's-services): amount
      cards as full-width horizontal rows — radio → icon → price → copy.
      All values measured 1:1 off the live longform (.gd-radio--longform). ── */
.block-donation-vic .donate-amounts-list .row--amounts {
	gap: 8px;
	padding-top: 0;
}
.block-donation-vic .donate-amounts-list .row--amounts > [class*="col-"] {
	flex: 1 1 100% !important;
	max-width: 100% !important;
}
.block-donation-vic .donate-amounts-list .donate-amounts > .weight-700 {
	font-size: 20px;
	margin: 0 0 8px;
}
.block-donation-vic .donate-amounts-list .row--amounts .donate-amount-col:not(.donate-amount-col--own) .gd-radio.radio--btn {
	width: 100%;
	min-height: 0;
	padding: 15px 30px; /* live label padding */
}
.block-donation-vic .donate-amounts-list .row--amounts .donate-amount-col:not(.donate-amount-col--own) .gd-radio__label {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	text-align: left;
	width: 100%;
}
.block-donation-vic .donate-amounts-list .donate-radio-container {
	margin: 0;
	flex: 0 0 auto;
}
.block-donation-vic .donate-amounts-list .gd-radio__anim-icon,
.block-donation-vic .donate-amounts-list .gd-radio__static-icon {
	width: 128px;
	height: 128px;
	margin: 0 0 5px;
	flex: 0 0 auto;
}
.block-donation-vic .donate-amounts-list .gd-radio__price {
	flex: 0 0 170px;
	width: 170px;
	margin: 0 12px;
	text-align: center;
	line-height: 1.2;
}
.block-donation-vic .donate-amounts-list .gd-radio__price b {
	font-size: 40px;
	font-weight: 600;
	line-height: 1.2;
}
.block-donation-vic .donate-amounts-list .row--amounts .gd-radio:has(input:checked) .gd-radio__price b,
.block-donation-vic .donate-amounts-list .row--amounts .gd-radio.is-checked .gd-radio__price b {
	font-size: 40px;
	font-weight: 600;
}
.block-donation-vic .donate-amounts-list .gd-radio__summary {
	flex: 1 1 auto;
}
.block-donation-vic .donate-amounts-list .gd-radio__summary small {
	font-size: 20px;
	font-weight: 400;
	color: #282829;
	line-height: 1.35;
}
/* Mobile (< 768px = live's 48em): keep everything in one row like live — a 3-col
   grid [radio | icon-over-price | summary]. The summary stays in its own column
   beside the icon/price (NOT wrapped below), and text sizes drop to fit. */
@media (max-width: 767.98px) {
	.block-donation-vic .donate-amounts-list .row--amounts .donate-amount-col:not(.donate-amount-col--own) .gd-radio.radio--btn {
		padding: 14px 16px;
	}
	.block-donation-vic .donate-amounts-list .row--amounts .donate-amount-col:not(.donate-amount-col--own) .gd-radio__label {
		display: grid;
		grid-template-areas:
			"radio icon summary"
			"radio price summary";
		grid-template-columns: auto 64px minmax(0, 1fr);
		grid-template-rows: auto auto;
		column-gap: 12px;
		row-gap: 0;
		align-items: center;
		width: 100%;
	}
	.block-donation-vic .donate-amounts-list .donate-radio-container {
		grid-area: radio;
		align-self: center;
	}
	.block-donation-vic .donate-amounts-list .gd-radio__anim-icon,
	.block-donation-vic .donate-amounts-list .gd-radio__static-icon {
		grid-area: icon;
		width: 64px;
		height: 64px;
		margin: 0;
		flex: 0 0 auto;
		align-self: end;
		justify-self: center;
	}
	.block-donation-vic .donate-amounts-list .gd-radio__price {
		grid-area: price;
		width: auto;
		flex: 0 0 auto;
		margin: 0;
		align-self: start;
		text-align: center;
	}
	.block-donation-vic .donate-amounts-list .gd-radio__price b,
	.block-donation-vic .donate-amounts-list .row--amounts .gd-radio:has(input:checked) .gd-radio__price b {
		font-size: 24px;
	}
	.block-donation-vic .donate-amounts-list .gd-radio__summary {
		grid-area: summary;
		align-self: center;
	}
	.block-donation-vic .donate-amounts-list .gd-radio__summary small {
		font-size: 15px;
		line-height: 1.3;
	}
}

/* List layout: "Choose your own amount" row matches the live longform card —
   4px transparent border + 2px grey outline, 90px tall. */
.block-donation-vic .donate-amounts-list .donate-amount-col--own .gd-radio.radio--btn {
	border: 4px solid transparent;
	outline: 2px solid #e9e9e7;
	min-height: 90px;
	padding: 15px 20px;
}
.block-donation-vic .donate-amounts-list .donate-amount-col--own .gd-radio:has(input:checked),
.block-donation-vic .donate-amounts-list .donate-amount-col--own .gd-radio.is-checked {
	border-color: #ff6e33;
}
.block-donation-vic .donate-amounts-list .donate-own-text b {
	font-size: 20px;
}
.block-donation-vic .donate-amounts-list .donate-own-text small {
	font-size: 16px;
	color: #282829;
}

/* List layout: extra space under the 2nd option so the "Most popular" badge on
   the 3rd row doesn't sit over it. (!important: the grid col rule zeroes margins.) */
.block-donation-vic .donate-amounts-list .row--amounts > .donate-amount-col:nth-child(2) {
	margin-bottom: 30px !important;
}

/* List layout: "Most popular" badge = orange tab w/ black text at the card's
   top-left, jutting up over the row above (exactly as live renders it). */
.block-donation-vic .donate-amounts-list .row--amounts .gd-radio.radio--btn[data-preferred]::before {
	left: 10px;
	transform: none;
	width: auto;
	padding: 5px 10px;
	top: -36px;
	height: 32px;
	line-height: 22px;
	background: #ff6e33;
	color: #282829;
}
.block-donation-vic .donate-amounts-list .row--amounts .gd-radio.radio--btn[data-preferred]:has(input:checked)::before,
.block-donation-vic .donate-amounts-list .row--amounts .gd-radio.radio--btn.is-checked[data-preferred]::before {
	background: #ff6e33;
	color: #282829;
}

@media (max-width: 767.98px) {
	.block-donation-vic.donate-amounts-list .row--amounts .donate-amount-col:not(.donate-amount-col--own) .gd-radio__label {
		display: grid;
		grid-template-areas: "donateradiocheck icon summary" "donateradiocheck price summary";
		grid-template-columns: minmax(2rem, 8vw) 10rem auto;
		grid-template-rows: auto auto;
		gap: 10px;
	}
	.block-donation-vic .donate-radio-container {
		grid-area: donateradiocheck;
	}
	.block-donation-vic .gd-radio__static-icon {
		grid-area: icon;
	}
	.block-donation-vic .gd-radio__price {
		grid-area: price;
		width: auto !important;
	}
	.block-donation-vic .gd-radio__summary {
		grid-area: summary;
	}
	.block-donation-vic.donate-amounts-list .row--amounts {
		margin-top: 40px;
	}
}