/* DonateNow front-end. Scoped to .dn-* classes; colours come from --dn-* tokens (override on a parent to re-brand). */

.dn-form-wrap,
.dn-campaign,
.dn-receipt,
.dn-dashboard {
	color-scheme: light;
	--dn-accent: #2563eb;
	--dn-accent-ink: #ffffff;
	--dn-accent-soft: #eef4ff;
	--dn-border: #dbe2ea;
	--dn-bg: #ffffff;
	--dn-surface: #f7f9fc;
	--dn-text: #111827;
	--dn-muted: #64748b;
	--dn-success: #15803d;
	--dn-danger: #b91c1c;
	--dn-radius: 14px;
	--dn-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--dn-text);
	line-height: 1.5;
}

.dn-form-wrap *,
.dn-campaign *,
.dn-receipt *,
.dn-dashboard * {
	box-sizing: border-box;
}

/* ---- card ---- */
.dn-form-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	color-scheme: light;
	margin: 1.5rem auto;
	padding: 1.75rem;
	background: var(--dn-bg);
	border: 1px solid var(--dn-border);
	border-radius: var(--dn-radius);
	box-shadow: var(--dn-shadow);
}
.dn-heading {
	margin: 0 0 .25rem;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.01em;
}
.dn-description {
	margin: 0 0 1rem;
	color: var(--dn-muted);
}
.dn-test-banner {
	display: inline-block;
	margin: 0 0 1rem;
	padding: .3rem .7rem;
	border-radius: 999px;
	background: #fef3c7;
	color: #92400e;
	font-size: .8rem;
	font-weight: 600;
}

/* ---- step indicator ---- */
.dn-steps {
	display: flex;
	gap: .5rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	counter-reset: none;
}
.dn-steps li {
	flex: 1;
	display: flex;
	align-items: center;
	gap: .5rem;
	min-width: 0;
	font-size: .85rem;
	color: var(--dn-muted);
}
.dn-steps li::after {
	content: "";
	flex: 1;
	height: 2px;
	margin-left: .25rem;
	background: var(--dn-border);
	border-radius: 2px;
}
.dn-steps li:last-child::after {
	display: none;
}
.dn-step-num {
	display: inline-grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	flex: none;
	border-radius: 50%;
	border: 2px solid var(--dn-border);
	font-weight: 700;
	font-size: .8rem;
	background: var(--dn-bg);
}
.dn-steps li.is-current {
	color: var(--dn-text);
	font-weight: 600;
}
.dn-steps li.is-current .dn-step-num {
	border-color: var(--dn-accent);
	background: var(--dn-accent);
	color: var(--dn-accent-ink);
}
.dn-steps li.is-done .dn-step-num {
	border-color: var(--dn-success);
	background: var(--dn-success);
	color: #fff;
}
.dn-steps li.is-done::after {
	background: var(--dn-success);
}
.dn-step-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
@media (max-width: 480px) {
	.dn-step-label { display: none; }
	.dn-steps li::after { margin-left: 0; }
}

/* ---- steps ---- */
.dn-form .dn-step[hidden] {
	display: none;
}
.dn-step-title {
	margin: 0 0 1rem;
	font-size: 1.1rem;
	font-weight: 650;
}
.dn-form fieldset {
	margin: 0 0 1.1rem;
	padding: 0;
	border: 0;
	min-width: 0;
}
.dn-form legend {
	margin: 0 0 .5rem;
	padding: 0;
	font-size: .85rem;
	font-weight: 600;
	color: var(--dn-muted);
}
.dn-form label {
	display: block;
	font-size: .9rem;
	font-weight: 500;
}
.dn-form p {
	margin: 0 0 .9rem;
}
.dn-form abbr {
	text-decoration: none;
	color: var(--dn-accent);
}
.dn-form input[type=text],
.dn-form input[type=email],
.dn-form input[type=number],
.dn-form input[type=date],
.dn-form select,
.dn-form textarea {
	display: block;
	width: 100%;
	margin-top: .35rem;
	padding: .7rem .8rem;
	border: 1px solid var(--dn-border);
	border-radius: 10px;
	background: var(--dn-bg);
	color: var(--dn-text);
	font: inherit;
	font-size: .95rem;
	transition: border-color .15s, box-shadow .15s;
}
.dn-form input:focus,
.dn-form select:focus,
.dn-form textarea:focus,
.dn-form button:focus-visible,
.dn-form .dn-seg-item:focus-within,
.dn-form .dn-level:focus-visible {
	outline: none;
	border-color: var(--dn-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dn-accent) 25%, transparent);
}
.dn-form .dn-field-invalid {
	border-color: var(--dn-danger);
}
.dn-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .8rem;
}
@media (max-width: 520px) {
	.dn-row { grid-template-columns: 1fr; }
	.dn-form-wrap { padding: 1.1rem; margin: .75rem auto; }
}

/* ---- step 1: preset amounts ---- */
.dn-currency {
	margin-bottom: .75rem !important;
}
.dn-currency select {
	max-width: 140px;
}
.dn-levels {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .6rem;
	margin: 0 0 .9rem;
}
.dn-level {
	padding: .85rem .5rem;
	border: 1.5px solid var(--dn-border);
	border-radius: 12px;
	background: var(--dn-bg);
	color: var(--dn-text);
	font: inherit;
	font-size: 1.05rem;
	font-weight: 650;
	cursor: pointer;
	transition: transform .08s, border-color .15s, background .15s, color .15s;
}
.dn-level:hover {
	border-color: var(--dn-accent);
	transform: translateY(-1px);
}
.dn-level.is-selected {
	background: var(--dn-accent);
	border-color: var(--dn-accent);
	color: var(--dn-accent-ink);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--dn-accent) 35%, transparent);
}
.dn-custom {
	display: block;
	margin-bottom: 1.1rem;
}
.dn-custom-label {
	display: block;
	margin-bottom: .35rem;
	font-size: .85rem;
	color: var(--dn-muted);
}
.dn-custom-field {
	position: relative;
	display: block;
}
.dn-custom-field input {
	padding-left: 2.2rem !important;
	font-size: 1.05rem !important;
}
.dn-custom-field .dn-symbol {
	position: absolute;
	left: .85rem;
	top: 50%;
	transform: translateY(-50%);
	margin-top: .15rem;
	color: var(--dn-muted);
	font-weight: 600;
	pointer-events: none;
}
.dn-custom input {
	margin-top: 0;
}

/* segmented control (frequency) */
.dn-seg {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .25rem;
	padding: .25rem;
	background: var(--dn-surface);
	border: 1px solid var(--dn-border);
	border-radius: 999px;
}
.dn-seg-item {
	position: relative;
	margin: 0 !important;
	cursor: pointer;
}
.dn-seg-item input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.dn-seg-item span {
	display: inline-block;
	white-space: nowrap;
	padding: .5rem 1rem;
	border-radius: 999px;
	font-size: .9rem;
	font-weight: 550;
	color: var(--dn-muted);
	transition: background .15s, color .15s;
}
.dn-seg-item input:checked + span {
	background: var(--dn-bg);
	color: var(--dn-text);
	box-shadow: 0 1px 3px rgba(15, 23, 42, .15);
}
.dn-seg-item input:focus-visible + span {
	outline: 2px solid var(--dn-accent);
	outline-offset: 2px;
}
.dn-frequency .dn-seg {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: .3rem;
	width: 100%;
	border-radius: 14px;
}
.dn-frequency .dn-seg-item {
	min-width: 0;
}
.dn-frequency .dn-seg-item span {
	display: block;
	padding: .55rem .35rem;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
@media (max-width: 480px) {
	.dn-frequency .dn-seg {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.dn-frequency .dn-seg-item span {
		font-size: .9rem;
		padding: .6rem .4rem;
	}
}
.dn-seg-small {
	margin-bottom: .8rem;
}

/* hidden must win over component display rules (buttons, steps, PayPal box) */
.dn-form [hidden],
.dn-form-wrap [hidden] {
	display: none !important;
}

/* ---- buttons & actions ---- */
.dn-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-top: 1.25rem;
}
.dn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .8rem 1.4rem;
	border: 1.5px solid transparent;
	border-radius: 12px;
	font: inherit;
	font-weight: 650;
	font-size: .98rem;
	cursor: pointer;
	transition: background .15s, transform .08s, opacity .15s;
}
.dn-btn:active { transform: translateY(1px); }
.dn-btn-primary {
	margin-left: auto;
	background: var(--dn-accent);
	color: var(--dn-accent-ink);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--dn-accent) 30%, transparent);
}
.dn-btn-primary:hover { filter: brightness(1.05); }
.dn-btn-ghost {
	background: transparent;
	color: var(--dn-muted);
	border-color: var(--dn-border);
}
.dn-btn-ghost:hover { color: var(--dn-text); border-color: var(--dn-muted); }
.dn-submit {
	width: 100%;
	margin-left: 0;
	padding: 1rem;
	font-size: 1.05rem;
}
.dn-submit:disabled { opacity: .6; cursor: wait; }
.dn-form .dn-actions .dn-btn-ghost + .dn-submit { width: auto; flex: 1; }

/* ---- step 2 ---- */
.dn-checks {
	margin: 0 0 1rem;
}
.dn-check {
	display: flex !important;
	align-items: flex-start;
	gap: .55rem;
	margin: 0 0 .55rem !important;
	font-weight: 450 !important;
	cursor: pointer;
}
.dn-check input {
	margin-top: .2rem;
	width: 1.05rem;
	height: 1.05rem;
	accent-color: var(--dn-accent);
	flex: none;
}
.dn-giftaid {
	margin: 0 0 1rem;
	padding: .9rem 1rem;
	border: 1px dashed var(--dn-border);
	border-radius: 12px;
	background: var(--dn-surface);
}
.dn-giftaid legend {
	color: var(--dn-text);
	font-weight: 650;
}

/* ---- step 3 ---- */
.dn-summary-card {
	margin: 0 0 1.2rem;
	padding: 1rem 1.1rem;
	background: var(--dn-surface);
	border: 1px solid var(--dn-border);
	border-radius: var(--dn-radius);
}
.dn-sum-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .5rem 0;
	font-size: .95rem;
	border-bottom: 1px solid var(--dn-border);
}
.dn-sum-row:last-child {
	border-bottom: 0;
}
.dn-sum-row > span {
	color: var(--dn-muted);
}
.dn-sum-row > strong {
	font-weight: 600;
	text-align: right;
}
.dn-sum-row[hidden] {
	display: none;
}
.dn-fee-row .dn-check {
	margin: 0 !important;
	font-weight: 500 !important;
	color: var(--dn-text);
}
.dn-fee-row .dn-check span {
	color: var(--dn-text);
}
.dn-sum-total {
	margin-top: .2rem;
	padding-top: .8rem;
	border-top: 2px solid var(--dn-border);
	border-bottom: 0;
}
.dn-sum-total > span {
	color: var(--dn-text);
	font-weight: 650;
}
.dn-sum-total > strong {
	font-size: 1.35rem;
	color: var(--dn-accent);
}

.dn-pay {
	margin-bottom: 1rem !important;
}
.dn-pay-option {
	display: flex !important;
	align-items: flex-start;
	gap: .75rem;
	margin: 0 0 .6rem !important;
	padding: .85rem 1rem;
	border: 1.5px solid var(--dn-border);
	border-radius: 12px;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.dn-pay-option:hover {
	border-color: var(--dn-accent);
}
.dn-pay-option:has(input:checked) {
	border-color: var(--dn-accent);
	background: var(--dn-accent-soft);
}
.dn-pay-option input {
	margin-top: .25rem;
	accent-color: var(--dn-accent);
	flex: none;
}
.dn-pay-body strong {
	display: block;
	font-weight: 600;
	font-size: .95rem;
}
.dn-pay-body small {
	display: block;
	color: var(--dn-muted);
	font-size: .82rem;
	font-weight: 400;
}
.dn-stripe-element {
	margin-top: .8rem;
}
.dn-stripe-element[hidden] {
	display: none;
}
.dn-consent {
	margin: .6rem 0 0 !important;
	font-size: .8rem;
	color: var(--dn-muted);
	text-align: center;
}

/* ---- messages ---- */
.dn-form > .dn-error,
.dn-error {
	margin: 0 0 1rem;
	padding: .75rem .9rem;
	border-radius: 10px;
	background: #fef2f2;
	color: var(--dn-danger);
	font-size: .92rem;
}
.dn-error[hidden] {
	display: none;
}
.dn-notice {
	margin: 1rem 0;
	padding: .85rem 1rem;
	border-radius: 10px;
	background: #ecfdf3;
	color: var(--dn-success);
	font-size: .95rem;
}
.dn-hp {
	position: absolute !important;
	left: -9999px !important;
	height: 1px;
	overflow: hidden;
}

/* ---- progress bar (goal) ---- */
.dn-progress {
	margin: 0 0 1.25rem;
}
.dn-progress-bar {
	height: 10px;
	border-radius: 999px;
	background: var(--dn-border);
	overflow: hidden;
}
.dn-progress-bar span {
	display: block;
	height: 100%;
	background: var(--dn-accent);
	border-radius: 999px;
	transition: width .4s ease;
}
.dn-progress-meta {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: .4rem;
	font-size: .88rem;
	color: var(--dn-muted);
}
.dn-progress-meta strong {
	color: var(--dn-text);
}

/* ---- receipt, dashboard, campaign, wall ---- */
.dn-receipt,
.dn-dashboard {
	max-width: 680px;
}
.dn-receipt table,
.dn-dashboard table {
	width: 100%;
	border-collapse: collapse;
	margin: 1em 0;
}
.dn-receipt th,
.dn-receipt td,
.dn-dashboard th,
.dn-dashboard td {
	text-align: left;
	padding: .6rem .5rem;
	border-bottom: 1px solid var(--dn-border);
}
.dn-wall {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1rem;
	list-style: none;
	padding: 0;
}
.dn-wall li {
	padding: 1rem;
	border: 1px solid var(--dn-border);
	border-radius: var(--dn-radius);
	background: var(--dn-bg);
}
.dn-wall .dn-wall-amount {
	font-weight: 700;
}
.dn-wall blockquote {
	margin: .5em 0 0;
	font-style: italic;
	color: var(--dn-muted);
}
.dn-campaign-cta {
	display: inline-block;
	margin: 1em 0;
	padding: .65rem 1.25rem;
	border-radius: 12px;
	background: var(--dn-accent);
	color: var(--dn-accent-ink) !important;
	text-decoration: none;
	font-weight: 600;
}

.dn-receipt-actions {
	margin-top: 1.5rem;
}

/* ---- receipt card (web page) ---- */
.dn-rc-card {
	box-sizing: border-box;
	width: 100%;
	max-width: 680px;
	margin: 1.5rem auto;
	padding: 28px;
	background: var(--dn-bg, #ffffff);
	color: var(--dn-text, #111827);
	border: 1px solid var(--dn-border, #dbe2ea);
	border-top: 4px solid var(--dn-accent, #2563eb);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);
}
.dn-rc-brand {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 16px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--dn-border, #dbe2ea);
}
.dn-rc-logo {
	display: block;
	max-height: 64px;
	max-width: 200px;
	width: auto;
	height: auto;
}
.dn-rc-name {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}
.dn-rc-line {
	font-size: 13px;
	color: var(--dn-muted, #64748b);
	line-height: 1.5;
}
.dn-rc-title {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 700;
	color: var(--dn-accent, #2563eb);
}
.dn-rc-list {
	margin: 0;
}
.dn-rc-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--dn-border, #dbe2ea);
}
.dn-rc-row dt {
	color: var(--dn-muted, #64748b);
	font-size: 14px;
}
.dn-rc-row dd {
	margin: 0;
	text-align: right;
	font-weight: 600;
	font-size: 14px;
	word-break: break-word;
}
.dn-rc-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 18px;
	padding: 14px 18px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--dn-accent, #2563eb) 10%, #ffffff);
}
.dn-rc-total span {
	font-weight: 600;
}
.dn-rc-total strong {
	font-size: 22px;
	color: var(--dn-accent, #2563eb);
}
.dn-rc-tax {
	margin: 18px 0 0;
	font-size: 12.5px;
	color: var(--dn-muted, #64748b);
}
.dn-rc-actions {
	margin: 20px 0 0;
	text-align: center;
}
.dn-rc-actions .dn-btn {
	min-width: 220px;
}
@media (max-width: 480px) {
	.dn-rc-card { padding: 20px; }
	.dn-rc-brand { flex-direction: column; align-items: flex-start; }
}