/*
 * The Ways to donate page (templates/pages/donate.php and the donate-route, donate-pick,
 * donate-ways and app-strip components), on tokens.css, page-head.css and components.css.
 *
 * Ported from Donate-Final (v2.1 + the Dark Red primary route card, the Dark Red Fundraise band,
 * the white Text to give card and the amount chips, §23c–§23l), the source of truth for phones
 * too (§23j: Donate-Mobile is the same page with Donate-Final's own ≤760px rules). Board colours
 * are the brand tokens; every rule is scoped to .skdr-donate so the theme's link, button and
 * heading styles never reach the page. The separate "Choose an amount" section (§23k) reuses
 * the chips' look on cards (.skdr-donate-pick*).
 */

.skdr-donate {
	color: var(--skdr-gray);
	font-family: var(--skdr-font);
}

.skdr-donate *,
.skdr-donate *::before,
.skdr-donate *::after {
	box-sizing: border-box;
}

/* The theme sets its own fonts and button chrome on bare elements; the boards are Poppins only (§1) */
.skdr-donate :is(h1, h2, h3, p, a, button, li, span, dt, dd, label, input, b) {
	font-family: var(--skdr-font);
}

.skdr-donate button {
	transition: none;
	text-transform: none;
	letter-spacing: normal;
}

.skdr-donate [hidden] {
	display: none !important;
}

.skdr-donate ul,
.skdr-donate ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.skdr-donate li {
	margin: 0;
}

.skdr-donate .skdr-donate-wrap {
	max-width: var(--skdr-container);
	margin: 0 auto;
	padding: 0 var(--skdr-gutter);
}

.skdr-donate .skdr-donate-wrap--head {
	padding-top: 32px;
	padding-bottom: 40px;
}

/* Editor text around [skdr_donate] (page-head.css): the sections are full bleed, so it takes the wrap's gutter */
.skdr-donate .skdr-page-content > :not(.skdr-placed) {
	padding-right: var(--skdr-gutter);
	padding-left: var(--skdr-gutter);
}

/* ---------------------------------------------------------------- head: breadcrumb, H1 + Share, intro, totaliser (§23c.1) */

.skdr-donate .skdr-donate-top {
	background: var(--skdr-white);
}

.skdr-donate .skdr-donate-ttl {
	margin: 0;
	padding: 0;
	color: var(--skdr-red);
	font-size: var(--skdr-fs-title);
	line-height: 52px;
	font-weight: var(--skdr-fw-bold);
}

.skdr-donate .skdr-donate-intro {
	margin: 12px 0 0;
	color: var(--skdr-ink);
	font-size: 18px;
	line-height: 28px;
	font-weight: var(--skdr-fw-regular);
}

.skdr-donate .skdr-donate-h1row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	margin: 24px 0 0;
}

.skdr-donate .skdr-donate-h1row .skdr-fs {
	margin-top: 0;
}

.skdr-donate .skdr-donate-h1row .skdr-fs__menu {
	left: auto;
	right: 0;
}

.skdr-donate .skdr-donate-tot {
	max-width: 960px;
	margin: 24px 0 0;
}

.skdr-donate .skdr-donate-tot__fig {
	margin: 0;
	color: var(--skdr-red);
	font-size: 28px;
	line-height: 36px;
	font-weight: var(--skdr-fw-bold);
}

.skdr-donate .skdr-donate-bar {
	height: 8px;
	margin: 12px 0 0;
	border-radius: var(--skdr-r-pill);
	background: var(--skdr-line);
	overflow: hidden;
}

.skdr-donate .skdr-donate-bar__fill {
	display: block;
	height: 100%;
	border-radius: var(--skdr-r-pill);
	background: var(--skdr-red);
}

.skdr-donate .skdr-donate-tot__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0 16px;
	margin: 8px 0 0;
}

.skdr-donate .skdr-donate-tot__of {
	margin: 0;
	color: var(--skdr-ink);
	font-size: var(--skdr-fs-body);
	line-height: 24px;
	font-weight: var(--skdr-fw-semibold);
}

.skdr-donate .skdr-donate-tot__upd {
	margin: 0;
	color: var(--skdr-muted);
	font-size: var(--skdr-fs-caption);
	line-height: 24px;
	font-weight: var(--skdr-fw-regular);
}

/* ---------------------------------------------------------------- module bands: #F9F9F9 / white, plain headings, no lines */

.skdr-donate .skdr-donate-sec {
	padding: var(--skdr-section-inner) 0;
}

.skdr-donate .skdr-donate-sec--w {
	background: var(--skdr-white);
}

.skdr-donate .skdr-donate-sec--g {
	background: var(--skdr-page);
}

.skdr-donate .skdr-donate-hgroup {
	margin: 0 0 24px;
}

.skdr-donate .skdr-donate-h2 {
	margin: 0;
	padding: 0;
	color: var(--skdr-ink);
	font-size: var(--skdr-fs-h2);
	line-height: var(--skdr-lh-h2);
	font-weight: var(--skdr-fw-bold);
}

.skdr-donate .skdr-donate-sub {
	margin: 8px 0 0;
	color: var(--skdr-gray);
	font-size: var(--skdr-fs-body);
	line-height: var(--skdr-lh-body);
	font-weight: var(--skdr-fw-regular);
}

.skdr-donate .skdr-donate-kicker {
	margin: 0 0 8px;
	color: var(--skdr-red);
	font-size: var(--skdr-fs-label);
	line-height: 16px;
	font-weight: var(--skdr-fw-semibold);
	letter-spacing: var(--skdr-ls-kicker);
	text-transform: uppercase;
}

/* ---------------------------------------------------------------- donate online: the visitor's route 2/3 (Dark Red, yellow pill), the other 1/3 (outline pill) */

.skdr-donate .skdr-donate-routes {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 24px;
}

.skdr-donate .skdr-donate-routes--one {
	grid-template-columns: minmax(0, 1fr);
}

.skdr-donate .skdr-donate-routes > li {
	display: flex;
	min-width: 0;
}

.skdr-donate .skdr-donate-route {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 32px;
	border-radius: var(--skdr-r-panel);
	background: var(--skdr-dark);
	box-shadow: none;
}

.skdr-donate .skdr-donate-route__top {
	display: flex;
	align-items: center;
	gap: 16px;
}

.skdr-donate .skdr-donate-route__t {
	margin: 0;
	padding: 0;
	color: var(--skdr-white);
	font-size: 34px;
	line-height: 42px;
	font-weight: var(--skdr-fw-bold);
}

.skdr-donate .skdr-donate-route__b {
	max-width: 620px;
	min-height: 56px;
	margin: 16px 0 0;
	color: var(--skdr-white);
	font-size: 18px;
	line-height: 28px;
	font-weight: var(--skdr-fw-regular);
}

.skdr-donate .skdr-donate-route__act {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: auto;
	padding-top: 24px;
}

.skdr-donate .skdr-donate-go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 56px;
	min-width: 240px;
	margin: 0;
	padding: 0 32px;
	border-radius: var(--skdr-r-pill);
	background: var(--skdr-yel);
	color: var(--skdr-on-yel);
	font-size: 18px;
	line-height: 1;
	font-weight: var(--skdr-fw-bold);
	text-decoration: none;
	white-space: nowrap;
}

.skdr-donate .skdr-donate-go:hover {
	background: var(--skdr-yel-h);
	color: var(--skdr-on-yel);
}

.skdr-donate .skdr-donate-go:focus-visible {
	outline: 3px solid var(--skdr-white);
	outline-offset: 3px;
	box-shadow: none;
}

.skdr-donate .skdr-donate-route__sec {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 16px 0 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--skdr-fs-small);
	line-height: var(--skdr-lh-small);
	font-weight: var(--skdr-fw-semibold);
}

.skdr-donate .skdr-donate-route__url {
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	margin: 4px 0 0;
	color: rgba(255, 255, 255, 0.65);
	font-size: var(--skdr-fs-caption);
	line-height: var(--skdr-lh-caption);
	font-weight: var(--skdr-fw-regular);
	overflow-wrap: anywhere;
}

.skdr-donate :is(.skdr-donate-route__sec, .skdr-donate-route__url) svg {
	flex: none;
	color: currentColor;
}

/* The other route: white, 1px ring, outline pill */
.skdr-donate .skdr-donate-route--alt {
	padding: 24px;
	background: var(--skdr-white);
	box-shadow: var(--skdr-shadow-card);
}

.skdr-donate .skdr-donate-route--alt .skdr-donate-route__top {
	gap: 12px;
}

.skdr-donate .skdr-donate-route--alt .skdr-donate-route__t {
	color: var(--skdr-ink);
	font-size: 24px;
	line-height: 32px;
}

.skdr-donate .skdr-donate-route--alt .skdr-donate-route__b {
	min-height: 0;
	margin-top: 12px;
	color: var(--skdr-gray);
	font-size: var(--skdr-fs-body);
	line-height: var(--skdr-lh-body);
}

.skdr-donate .skdr-donate-route--alt .skdr-donate-route__act {
	padding-top: 20px;
}

.skdr-donate .skdr-donate-route--alt .skdr-donate-route__sec {
	margin-top: 12px;
	color: var(--skdr-gray);
}

.skdr-donate .skdr-donate-route--alt .skdr-donate-route__url {
	color: var(--skdr-muted);
}

.skdr-donate .skdr-donate-route--alt :is(.skdr-donate-route__sec, .skdr-donate-route__url) svg {
	color: var(--skdr-gray);
}

.skdr-donate .skdr-donate-route--alt .skdr-donate-go,
.skdr-donate .skdr-donate-go--alt {
	height: 48px;
	min-width: 0;
	padding: 0 24px;
	background: var(--skdr-white);
	box-shadow: inset 0 0 0 2px var(--skdr-dark);
	color: var(--skdr-dark);
	font-size: var(--skdr-fs-body);
	font-weight: var(--skdr-fw-semibold);
}

.skdr-donate .skdr-donate-route--alt .skdr-donate-go:hover,
.skdr-donate .skdr-donate-go--alt:hover {
	background: var(--skdr-tint);
	color: var(--skdr-dark);
}

.skdr-donate .skdr-donate-route--alt .skdr-donate-go:focus-visible {
	outline: var(--skdr-focus-outline);
	outline-offset: var(--skdr-focus-offset);
	box-shadow: inset 0 0 0 2px var(--skdr-dark), var(--skdr-focus-shadow);
}

.skdr-donate .skdr-donate-route--alt .skdr-donate-go svg {
	width: 18px;
	height: 18px;
}

/* ---------------------------------------------------------------- amount chips in the route cards (§23l): white outline on Dark Red, Dark Red outline on white */

.skdr-donate .skdr-donate-amt-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 20px 0 0;
}

.skdr-donate .skdr-donate-amt-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 64px;
	height: 44px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: var(--skdr-r-pill);
	background: transparent;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
	color: var(--skdr-white);
	font-size: var(--skdr-fs-body);
	line-height: 1;
	font-weight: var(--skdr-fw-semibold);
	white-space: nowrap;
	cursor: pointer;
}

.skdr-donate .skdr-donate-amt-chip:hover {
	background: rgba(255, 255, 255, 0.12);
	color: var(--skdr-white);
}

.skdr-donate .skdr-donate-amt-chip--on,
.skdr-donate .skdr-donate-amt-chip--on:hover {
	background: var(--skdr-white);
	box-shadow: none;
	color: var(--skdr-dark);
}

.skdr-donate .skdr-donate-amt-chip:focus-visible {
	outline: 3px solid var(--skdr-yel);
	outline-offset: 2px;
	box-shadow: none;
}

.skdr-donate .skdr-donate-route--alt .skdr-donate-amt-chip {
	box-shadow: inset 0 0 0 1px var(--skdr-dark);
	color: var(--skdr-dark);
}

.skdr-donate .skdr-donate-route--alt .skdr-donate-amt-chip:hover {
	background: var(--skdr-tint);
}

.skdr-donate .skdr-donate-route--alt .skdr-donate-amt-chip--on,
.skdr-donate .skdr-donate-route--alt .skdr-donate-amt-chip--on:hover {
	background: var(--skdr-dark);
	box-shadow: none;
	color: var(--skdr-white);
}

.skdr-donate .skdr-donate-route--alt .skdr-donate-amt-chip:focus-visible {
	outline: var(--skdr-focus-outline);
	outline-offset: var(--skdr-focus-offset);
	box-shadow: var(--skdr-focus-shadow);
}

.skdr-donate .skdr-donate-amt-line {
	align-self: stretch;
	max-width: 620px;
	margin: 12px 0 0;
	padding: 10px 14px;
	border-radius: var(--skdr-r-card);
	background: rgba(255, 255, 255, 0.12);
	color: var(--skdr-white);
	font-size: 15px;
	line-height: 22px;
	font-weight: var(--skdr-fw-regular);
}

.skdr-donate .skdr-donate-amt-line:empty {
	display: none;
}

.skdr-donate .skdr-donate-route--alt .skdr-donate-amt-line {
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: var(--skdr-gray);
}

.skdr-donate .skdr-donate-amt-other {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 12px 0 0;
}

.skdr-donate .skdr-donate-amt-other label {
	margin: 0;
	color: var(--skdr-white);
	font-size: var(--skdr-fs-small);
	line-height: var(--skdr-lh-small);
	font-weight: var(--skdr-fw-semibold);
}

.skdr-donate :is(.skdr-donate-route--alt, .skdr-donate-pick) .skdr-donate-amt-other label {
	color: var(--skdr-ink);
}

.skdr-donate .skdr-donate-amt-field {
	display: flex;
	align-items: center;
	width: 160px;
	height: 44px;
	border-radius: var(--skdr-r-card);
	background: var(--skdr-white);
	box-shadow: inset 0 0 0 1px var(--skdr-track);
}

.skdr-donate .skdr-donate-amt-field:focus-within {
	box-shadow: inset 0 0 0 2px var(--skdr-dark);
}

.skdr-donate .skdr-donate-route:not(.skdr-donate-route--alt) .skdr-donate-amt-field:focus-within {
	box-shadow: inset 0 0 0 2px var(--skdr-dark), 0 0 0 3px var(--skdr-yel);
}

.skdr-donate .skdr-donate-amt-field__cur {
	flex: none;
	padding: 0 2px 0 12px;
	color: var(--skdr-ink);
	font-size: var(--skdr-fs-body);
	line-height: 24px;
	font-weight: var(--skdr-fw-semibold);
}

.skdr-donate .skdr-donate-amt-field input {
	flex: 1;
	min-width: 0;
	height: 42px;
	margin: 0;
	padding: 0 12px 0 2px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--skdr-ink);
	font-size: var(--skdr-fs-body);
	line-height: 24px;
	font-weight: var(--skdr-fw-semibold);
}

.skdr-donate .skdr-donate-amt-field input:focus,
.skdr-donate .skdr-donate-amt-field input:focus-visible {
	outline: none;
	box-shadow: none;
}

.skdr-donate .skdr-donate-amt-field input::placeholder {
	color: var(--skdr-muted);
	font-weight: var(--skdr-fw-regular);
}

/* ---------------------------------------------------------------- text to give: the quiet white card (secondary) */

.skdr-donate .skdr-donate-sms {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
	margin: 40px 0 0;
	padding: 24px 32px;
	border-radius: var(--skdr-r-panel);
	background: var(--skdr-white);
	box-shadow: var(--skdr-shadow-ring);
	color: var(--skdr-ink);
}

.skdr-donate .skdr-donate-routes + .skdr-donate-sms {
	margin-top: 40px;
}

.skdr-donate .skdr-donate-hgroup + .skdr-donate-sms {
	margin-top: 0;
}

.skdr-donate .skdr-donate-sms__txt {
	flex: 1 1 420px;
	min-width: 0;
}

.skdr-donate .skdr-donate-sms__k {
	margin: 0;
	padding: 0;
	color: var(--skdr-dark);
	font-size: var(--skdr-fs-label);
	line-height: var(--skdr-lh-label);
	font-weight: var(--skdr-fw-semibold);
	letter-spacing: var(--skdr-ls-label);
	text-transform: uppercase;
}

.skdr-donate .skdr-donate-sms__main {
	margin: 4px 0 0;
	color: var(--skdr-ink);
	font-size: 22px;
	line-height: 30px;
	font-weight: var(--skdr-fw-bold);
}

.skdr-donate .skdr-donate-sms__main b {
	color: var(--skdr-dark);
	font-weight: var(--skdr-fw-bold);
}

.skdr-donate .skdr-donate-sms__fine {
	margin: 4px 0 0;
	color: var(--skdr-gray);
	font-size: var(--skdr-fs-small);
	line-height: var(--skdr-lh-small);
	font-weight: var(--skdr-fw-regular);
}

.skdr-donate .skdr-donate-sms__fine a {
	color: var(--skdr-dark);
	font-weight: var(--skdr-fw-semibold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.skdr-donate .skdr-donate-sms__fine a:hover {
	color: var(--skdr-red);
}

.skdr-donate .skdr-donate-sms__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.skdr-donate .skdr-donate-txtbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	padding: 0 22px;
	border: 2px solid var(--skdr-dark);
	border-radius: var(--skdr-r-pill);
	background: var(--skdr-white);
	color: var(--skdr-dark);
	font-size: var(--skdr-fs-body);
	line-height: 1;
	font-weight: var(--skdr-fw-semibold);
	text-decoration: none;
	white-space: nowrap;
}

.skdr-donate .skdr-donate-txtbtn:hover {
	background: var(--skdr-tint);
	color: var(--skdr-dark);
}

.skdr-donate .skdr-donate-sms a:focus-visible {
	outline: 2px solid var(--skdr-dark);
	box-shadow: 0 0 0 4px var(--skdr-white);
}

/* ---------------------------------------------------------------- choose an amount, the separate section (§23k): route switch, amount cards, detail */

.skdr-donate .skdr-donate-pick__switch {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 20px;
	padding: 4px;
	border-radius: var(--skdr-r-pill);
	background: var(--skdr-fill);
}

.skdr-donate .skdr-donate-pick__seg {
	min-height: 44px;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: var(--skdr-r-pill);
	background: transparent;
	color: var(--skdr-ink);
	font-size: var(--skdr-fs-small);
	line-height: 1;
	font-weight: var(--skdr-fw-semibold);
	cursor: pointer;
}

.skdr-donate .skdr-donate-pick__seg--on,
.skdr-donate .skdr-donate-pick__seg--on:hover {
	background: var(--skdr-dark);
	color: var(--skdr-white);
}

.skdr-donate .skdr-donate-pick__cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.skdr-donate .skdr-donate-pick__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	min-height: 96px;
	margin: 0;
	padding: 16px;
	border: 0;
	border-radius: var(--skdr-r-panel);
	background: var(--skdr-white);
	box-shadow: var(--skdr-shadow-card);
	color: var(--skdr-ink);
	text-align: left;
	cursor: pointer;
}

.skdr-donate .skdr-donate-pick__card--on,
.skdr-donate .skdr-donate-pick__card--on:hover {
	background: var(--skdr-tint);
	box-shadow: inset 0 0 0 2px var(--skdr-dark);
}

.skdr-donate :is(.skdr-donate-pick__seg, .skdr-donate-pick__card):focus-visible {
	outline: var(--skdr-focus-outline);
	outline-offset: var(--skdr-focus-offset);
	box-shadow: var(--skdr-focus-shadow);
}

.skdr-donate .skdr-donate-pick__amt {
	color: var(--skdr-dark);
	font-size: 28px;
	line-height: 36px;
	font-weight: var(--skdr-fw-bold);
}

.skdr-donate .skdr-donate-pick__t {
	color: var(--skdr-ink);
	font-size: var(--skdr-fs-body);
	line-height: 22px;
	font-weight: var(--skdr-fw-semibold);
}

.skdr-donate .skdr-donate-pick__detail {
	margin: 20px 0 0;
	padding: 24px;
	border-radius: var(--skdr-r-panel);
	background: var(--skdr-white);
	box-shadow: var(--skdr-shadow-card);
}

.skdr-donate .skdr-donate-pick__h {
	margin: 0;
	padding: 0;
	color: var(--skdr-ink);
	font-size: 24px;
	line-height: 32px;
	font-weight: var(--skdr-fw-bold);
}

.skdr-donate .skdr-donate-pick__d {
	max-width: 720px;
	margin: 8px 0 0;
	color: var(--skdr-gray);
	font-size: var(--skdr-fs-body);
	line-height: var(--skdr-lh-body);
}

.skdr-donate .skdr-donate-pick__helps {
	margin: 12px 0 0;
}

.skdr-donate .skdr-donate-pick__helps li {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--skdr-ink);
	font-size: var(--skdr-fs-body);
	line-height: var(--skdr-lh-body);
}

.skdr-donate .skdr-donate-pick__helps svg {
	flex: none;
	color: var(--skdr-dark);
}

.skdr-donate .skdr-donate-pick__act {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-top: 20px;
}

.skdr-donate .skdr-donate-pick__act .skdr-donate-go:focus-visible {
	outline: var(--skdr-focus-outline);
	outline-offset: var(--skdr-focus-offset);
	box-shadow: var(--skdr-focus-shadow);
}

.skdr-donate .skdr-donate-pick__act .skdr-donate-route__sec {
	color: var(--skdr-gray);
}

.skdr-donate .skdr-donate-pick__note {
	margin: 4px 0 0;
	color: var(--skdr-muted);
	font-size: var(--skdr-fs-caption);
	line-height: var(--skdr-lh-caption);
}

/* ---------------------------------------------------------------- shared: icon tile, top row, tags */

.skdr-donate .skdr-donate-row {
	display: flex;
	align-items: center;
	gap: 16px;
}

.skdr-donate .skdr-donate-row--top {
	align-self: stretch;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.skdr-donate .skdr-donate-ic {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--skdr-r-card);
	background: var(--skdr-tint);
	color: var(--skdr-dark);
}

.skdr-donate .skdr-donate-tag {
	flex: none;
	display: inline-flex;
	align-items: center;
	height: 24px;
	margin-left: auto;
	padding: 0 8px;
	border-radius: var(--skdr-r-chip);
	font-size: var(--skdr-fs-label);
	line-height: 24px;
	font-weight: var(--skdr-fw-semibold);
	white-space: nowrap;
}

.skdr-donate .skdr-donate-tag--tbc {
	background: var(--skdr-tint);
	color: var(--skdr-dark);
}

.skdr-donate .skdr-donate-tag--later {
	background: var(--skdr-fill);
	box-shadow: inset 0 0 0 1px var(--skdr-line);
	color: var(--skdr-gray);
}

/* ---------------------------------------------------------------- other ways to give (§23f): PayPal + eBay stacked | Bank transfer | By post / cheque */

.skdr-donate .skdr-donate-ways {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-areas: "pp bk po" "eb bk po";
	gap: 24px;
}

/* A card turned off or without its link: the rest flow and share each row, so no cell stays empty */
.skdr-donate .skdr-donate-ways--flow {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.skdr-donate .skdr-donate-ways--flow > .skdr-donate-way {
	flex: 1 1 280px;
}

.skdr-donate .skdr-donate-way {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	padding: 24px;
	border-radius: var(--skdr-r-panel);
	background: var(--skdr-white);
	box-shadow: var(--skdr-shadow-card);
}

.skdr-donate .skdr-donate-way--bk {
	grid-area: bk;
}

.skdr-donate .skdr-donate-way--po {
	grid-area: po;
}

.skdr-donate .skdr-donate-way--pp {
	grid-area: pp;
}

.skdr-donate .skdr-donate-way--eb {
	grid-area: eb;
}

.skdr-donate .skdr-donate-ways--flow .skdr-donate-way {
	grid-area: auto;
}

.skdr-donate .skdr-donate-way--compact {
	padding: 20px;
}

.skdr-donate .skdr-donate-way__top {
	display: flex;
	align-items: center;
	gap: 12px;
	align-self: stretch;
}

.skdr-donate .skdr-donate-way .skdr-donate-ic {
	width: 40px;
	height: 40px;
}

.skdr-donate .skdr-donate-way__t {
	margin: 0;
	padding: 0;
	color: var(--skdr-ink);
	font-size: var(--skdr-fs-h3);
	line-height: var(--skdr-lh-h3);
	font-weight: var(--skdr-fw-bold);
}

.skdr-donate .skdr-donate-way__l {
	margin: 8px 0 0;
	color: var(--skdr-gray);
	font-size: var(--skdr-fs-small);
	line-height: var(--skdr-lh-small);
	font-weight: var(--skdr-fw-regular);
}

.skdr-donate .skdr-donate-way__a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: var(--skdr-tap);
	margin-top: auto;
	border-radius: 2px;
	color: var(--skdr-dark);
	font-size: var(--skdr-fs-small);
	line-height: var(--skdr-lh-small);
	font-weight: var(--skdr-fw-semibold);
	text-decoration: none;
}

.skdr-donate .skdr-donate-way__a svg {
	flex: none;
}

.skdr-donate .skdr-donate-way__a:hover {
	color: var(--skdr-red);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.skdr-donate .skdr-donate-way--compact .skdr-donate-way__a {
	padding-top: 4px;
}

/* The board's details are a plain grid in the card: Kreeti's dl box (2px border, 2.5em padding) and dd padding never reach it */
.skdr-donate .skdr-donate-det {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	align-self: stretch;
	margin: 16px 0 0;
	padding: 0;
	border: 0;
	background: none;
}

.skdr-donate .skdr-donate-det--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.skdr-donate .skdr-donate-det div {
	min-width: 0;
}

.skdr-donate .skdr-donate-det dt {
	margin: 0;
	padding: 0;
	text-align: left;
	color: var(--skdr-muted);
	font-size: var(--skdr-fs-caption);
	line-height: var(--skdr-lh-caption);
	font-weight: var(--skdr-fw-regular);
}

.skdr-donate .skdr-donate-det dd {
	margin: 2px 0 0;
	padding: 0;
	color: var(--skdr-ink);
	font-size: 15px;
	line-height: 22px;
	font-weight: var(--skdr-fw-semibold);
	font-variant-numeric: tabular-nums;
}

.skdr-donate .skdr-donate-ref {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 16px 0 0;
	color: var(--skdr-gray);
	font-size: var(--skdr-fs-caption);
	line-height: var(--skdr-lh-caption);
	font-weight: var(--skdr-fw-regular);
}

.skdr-donate .skdr-donate-ref :is(b, strong) {
	color: var(--skdr-ink);
	font-weight: var(--skdr-fw-semibold);
}

.skdr-donate .skdr-donate-ref .skdr-donate-tag {
	margin-left: 0;
}

.skdr-donate .skdr-donate-copy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-top: auto;
	padding-top: 20px;
}

.skdr-donate .skdr-donate-copy__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: var(--skdr-tap);
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: var(--skdr-r-pill);
	background: var(--skdr-white);
	box-shadow: inset 0 0 0 2px var(--skdr-dark);
	color: var(--skdr-dark);
	font-size: 15px;
	line-height: 1;
	font-weight: var(--skdr-fw-semibold);
	white-space: nowrap;
	cursor: pointer;
}

.skdr-donate .skdr-donate-copy__btn:hover {
	background: var(--skdr-tint);
	color: var(--skdr-dark);
}

.skdr-donate .skdr-donate-copy__ok {
	color: var(--skdr-ink);
	font-size: var(--skdr-fs-small);
	line-height: var(--skdr-lh-small);
	font-weight: var(--skdr-fw-semibold);
}

.skdr-donate .skdr-donate-explore {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	margin: 24px 0 0;
	padding: 16px 24px;
	border-radius: var(--skdr-r-panel);
	background: var(--skdr-white);
	box-shadow: var(--skdr-shadow-card);
}

.skdr-donate .skdr-donate-ways + .skdr-donate-explore {
	margin-top: 24px;
}

.skdr-donate .skdr-donate-explore__txt {
	min-width: 0;
}

.skdr-donate .skdr-donate-explore__t {
	margin: 0;
	padding: 0;
	color: var(--skdr-ink);
	font-size: var(--skdr-fs-h3);
	line-height: var(--skdr-lh-h3);
	font-weight: var(--skdr-fw-bold);
}

.skdr-donate .skdr-donate-explore__l {
	margin: 2px 0 0;
	color: var(--skdr-gray);
	font-size: var(--skdr-fs-small);
	line-height: var(--skdr-lh-small);
	font-weight: var(--skdr-fw-regular);
}

.skdr-donate .skdr-donate-explore .skdr-donate-way__a {
	flex: none;
	margin-top: 0;
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- fundraise for us: the Dark Red band (yellow kicker, white 40px heading, yellow pill) */

.skdr-donate .skdr-donate-sec--fund {
	background: var(--skdr-dark);
}

.skdr-donate .skdr-donate-sec--fund .skdr-donate-kicker {
	color: var(--skdr-yel);
}

.skdr-donate .skdr-donate-sec--fund .skdr-donate-h2 {
	color: var(--skdr-white);
	font-size: 40px;
	line-height: 48px;
}

.skdr-donate .skdr-donate-fund {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px 48px;
}

.skdr-donate .skdr-donate-fund__txt {
	flex: 1 1 480px;
	min-width: 0;
}

.skdr-donate .skdr-donate-fund__p {
	margin: 0;
	color: var(--skdr-white);
	font-size: 18px;
	line-height: 28px;
	font-weight: var(--skdr-fw-regular);
}

.skdr-donate .skdr-donate-fund__note {
	margin: 8px 0 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--skdr-fs-small);
	line-height: var(--skdr-lh-small);
	font-weight: var(--skdr-fw-regular);
}

.skdr-donate .skdr-donate-fund__act {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.skdr-donate .skdr-donate-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 56px;
	padding: 0 32px;
	border-radius: var(--skdr-r-pill);
	background: var(--skdr-yel);
	color: var(--skdr-on-yel);
	font-size: 18px;
	line-height: 1;
	font-weight: var(--skdr-fw-bold);
	text-decoration: none;
	white-space: nowrap;
}

.skdr-donate .skdr-donate-ghost:hover {
	background: var(--skdr-yel-h);
	color: var(--skdr-on-yel);
}

.skdr-donate .skdr-donate-tlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: var(--skdr-tap);
	border-radius: 2px;
	color: var(--skdr-white);
	font-size: 15px;
	line-height: 22px;
	font-weight: var(--skdr-fw-semibold);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.skdr-donate .skdr-donate-tlink:hover {
	color: var(--skdr-yel);
}

.skdr-donate .skdr-donate-sec--fund a:focus-visible {
	outline: 3px solid var(--skdr-white);
	outline-offset: 3px;
	box-shadow: none;
}

/* ---------------------------------------------------------------- more ways to give · coming later (§23a) */

.skdr-donate .skdr-donate-more {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.skdr-donate .skdr-donate-more > li {
	padding: 24px;
	border: 1px solid var(--skdr-line);
	border-radius: var(--skdr-r-panel);
	background: var(--skdr-white);
}

.skdr-donate .skdr-donate-more__t {
	margin: 16px 0 0;
	padding: 0;
	color: var(--skdr-ink);
	font-size: 20px;
	line-height: 28px;
	font-weight: var(--skdr-fw-bold);
}

.skdr-donate .skdr-donate-more__a {
	color: var(--skdr-ink);
	text-decoration: none;
}

.skdr-donate .skdr-donate-more__a:hover {
	color: var(--skdr-red);
	text-decoration: underline;
}

.skdr-donate .skdr-donate-more__from {
	margin: 4px 0 0;
	color: var(--skdr-dark);
	font-size: var(--skdr-fs-small);
	line-height: var(--skdr-lh-small);
	font-weight: var(--skdr-fw-semibold);
}

.skdr-donate .skdr-donate-more__d {
	min-height: 78px;
	margin: 8px 0 0;
	color: var(--skdr-gray);
	font-size: var(--skdr-fs-body);
	line-height: var(--skdr-lh-body);
	font-weight: var(--skdr-fw-regular);
}

/* ---------------------------------------------------------------- questions: answers shown open (presenter Q&A card style) */

.skdr-donate .skdr-donate-qgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.skdr-donate .skdr-donate-qc {
	padding: 20px 24px 24px;
	border: 1px solid var(--skdr-line);
	border-radius: var(--skdr-r-panel);
	background: var(--skdr-white);
}

.skdr-donate .skdr-donate-qc__q {
	margin: 0;
	padding: 0;
	color: var(--skdr-muted);
	font-size: var(--skdr-fs-caption);
	line-height: var(--skdr-lh-caption);
	font-weight: var(--skdr-fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.skdr-donate .skdr-donate-qc__a {
	min-height: 112px;
	margin: 8px 0 0;
	color: var(--skdr-ink);
	font-size: 18px;
	line-height: 28px;
	font-weight: var(--skdr-fw-regular);
}

.skdr-donate .skdr-donate-qc__a a {
	color: var(--skdr-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.skdr-donate .skdr-donate-qc__a a:hover {
	color: var(--skdr-red);
}

.skdr-donate .skdr-donate-app {
	margin-top: 48px;
}

.skdr-donate .skdr-donate-qgrid + .skdr-donate-app,
.skdr-donate .skdr-donate-hgroup + .skdr-donate-app {
	margin-top: 48px;
}

.skdr-donate .skdr-donate-wrap > .skdr-donate-app:first-child {
	margin-top: 0;
}

/* The slim app strip (App-Desktop §13a), as on the show page; the badges are the app-badges component */
.skdr-donate .skdr-app-strip {
	display: flex;
	align-items: center;
	gap: var(--skdr-sp-16);
	min-height: 72px;
	padding: 0 var(--skdr-sp-16);
	overflow: hidden;
	border-radius: var(--skdr-r-card);
	background: var(--skdr-white);
	box-shadow: var(--skdr-shadow-ring);
}

.skdr-donate .skdr-app-strip__icon {
	display: block;
	flex: none;
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 9px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.skdr-donate .skdr-app-strip__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.skdr-donate .skdr-app-strip__title {
	flex: 1;
	min-width: 0;
	margin: 0;
	color: var(--skdr-ink);
	font-size: var(--skdr-fs-body);
	line-height: 24px;
	font-weight: var(--skdr-fw-bold);
}

.skdr-donate .skdr-app-strip .skdr-app-badges {
	flex-wrap: nowrap;
	margin-top: 0;
}

/* Share's "Link copied" toast (share.js fills it) */
.skdr-donate .skdr-donate-toast {
	position: fixed;
	bottom: var(--skdr-sp-24);
	left: 50%;
	z-index: 20;
	margin: 0;
	padding: 10px var(--skdr-sp-16);
	border-radius: var(--skdr-r-pill);
	background: var(--skdr-ink);
	color: var(--skdr-white);
	font-size: var(--skdr-fs-small);
	line-height: var(--skdr-lh-small);
	font-weight: var(--skdr-fw-semibold);
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%);
	transition: opacity var(--skdr-hover-fade) ease;
}

.skdr-donate .skdr-donate-toast[data-on] {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.skdr-donate .skdr-donate-toast {
		transition: none;
	}
}

/* ---------------------------------------------------------------- focus ring on the light surfaces */

.skdr-donate :is(.skdr-donate-way__a, .skdr-donate-copy__btn, .skdr-donate-txtbtn, .skdr-donate-more__a, .skdr-donate-qc__a a, .skdr-crumb a):focus-visible {
	outline: var(--skdr-focus-outline);
	outline-offset: var(--skdr-focus-offset);
	box-shadow: var(--skdr-focus-shadow);
}

/* ---------------------------------------------------------------- ≤900px: one column of routes, questions and tiles; other ways 2 × 2 */

@media (max-width: 900px) {
	.skdr-donate .skdr-donate-routes,
	.skdr-donate .skdr-donate-qgrid,
	.skdr-donate .skdr-donate-more {
		grid-template-columns: minmax(0, 1fr);
	}

	.skdr-donate .skdr-donate-ways {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas: "bk po" "pp eb";
	}

	.skdr-donate .skdr-donate-ways--flow {
		grid-template-areas: none;
	}

	.skdr-donate .skdr-donate-pick__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.skdr-donate :is(.skdr-donate-qc__a, .skdr-donate-more__d, .skdr-donate-route__b, .skdr-donate-way__l) {
		min-height: 0;
	}
}

/* ---------------------------------------------------------------- ≤760px: phones (Donate-Mobile: the same page at 390px) */

@media (max-width: 760px) {
	/* Sides only: the head keeps the board's 32px above the breadcrumb (Donate-Mobile) */
	.skdr-donate .skdr-donate-wrap {
		padding-right: var(--skdr-gutter-phone);
		padding-left: var(--skdr-gutter-phone);
	}

	.skdr-donate .skdr-donate-ways {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: none;
	}

	.skdr-donate .skdr-donate-way {
		grid-area: auto;
		padding: 20px;
	}

	.skdr-donate .skdr-donate-ttl {
		font-size: var(--skdr-fs-title-phone);
		line-height: 38px;
	}

	.skdr-donate .skdr-donate-intro {
		font-size: var(--skdr-fs-body);
		line-height: var(--skdr-lh-body);
	}

	.skdr-donate .skdr-donate-tot__fig {
		font-size: 22px;
		line-height: 30px;
	}

	.skdr-donate .skdr-donate-sec {
		padding: 40px 0;
	}

	.skdr-donate .skdr-donate-h2 {
		font-size: var(--skdr-fs-h2-phone);
		line-height: var(--skdr-lh-h2-phone);
	}

	.skdr-donate .skdr-donate-route {
		padding: 24px 20px;
	}

	.skdr-donate .skdr-donate-route__t {
		font-size: 26px;
		line-height: 34px;
	}

	.skdr-donate .skdr-donate-route--alt .skdr-donate-route__t {
		font-size: 20px;
		line-height: 28px;
	}

	.skdr-donate .skdr-donate-go {
		width: 100%;
		min-width: 0;
	}

	.skdr-donate .skdr-donate-amt-chips {
		align-self: stretch;
		margin-top: 16px;
	}

	.skdr-donate .skdr-donate-amt-chip {
		flex: 1 0 64px;
	}

	.skdr-donate .skdr-donate-amt-field {
		flex: 1 1 140px;
	}

	.skdr-donate .skdr-donate-sms {
		padding: 20px;
	}

	.skdr-donate .skdr-donate-sms__btns {
		width: 100%;
	}

	.skdr-donate .skdr-donate-txtbtn {
		flex: 1 1 0;
	}

	.skdr-donate .skdr-donate-sec--fund .skdr-donate-h2 {
		font-size: 28px;
		line-height: 36px;
	}

	.skdr-donate .skdr-donate-fund__act {
		width: 100%;
	}

	.skdr-donate .skdr-donate-ghost {
		width: 100%;
	}

	.skdr-donate .skdr-donate-qc {
		padding: 16px 20px 20px;
	}

	.skdr-donate .skdr-donate-qc__a {
		font-size: var(--skdr-fs-body);
		line-height: var(--skdr-lh-body);
	}

	.skdr-donate .skdr-donate-pick__detail {
		padding: 20px;
	}
}

@media (max-width: 640px) {
	.skdr-donate .skdr-app-strip {
		flex-wrap: wrap;
		padding: 16px;
	}

	.skdr-donate .skdr-app-strip__title {
		flex: 1 1 200px;
	}

	.skdr-donate .skdr-app-strip .skdr-app-badges {
		flex-wrap: wrap;
	}
}

@media (max-width: 560px) {
	.skdr-donate .skdr-donate-explore {
		padding: 16px 20px;
	}
}