@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Hanken+Grotesk:wght@400;500;600;700;900&display=swap');

.beacon-donation-shell {
	--beacon-paper: #fbf7ef;
	--beacon-field: #f4ecdd;
	--beacon-ink: #2f2418;
	--beacon-bark: #5b4a39;
	--beacon-muted: #8c7a62;
	--beacon-forest: #3f6a39;
	--beacon-forest-deep: #2f5029;
	--beacon-panel-1: #2b3d23;
	--beacon-panel-2: #3a4f2c;
	--beacon-cream: #f1ebdf;
	--beacon-sage: #a9bf8f;
	--beacon-wheat: #d6b269;
	--beacon-line: #ddcdb3;
	--beacon-shadow: rgba(40, 30, 16, .22);
	box-sizing: border-box;
	display: grid;
	grid-template-columns: .86fr 1fr;
	width: 100%;
	max-width: 920px;
	margin: 0 auto;
	border: 0;
	border-radius: 24px;
	overflow: hidden;
	background: var(--beacon-paper);
	box-shadow: 0 40px 80px -34px var(--beacon-shadow), 0 10px 24px -18px var(--beacon-shadow);
	font-family: 'Hanken Grotesk', sans-serif;
	color: var(--beacon-bark);
}

.beacon-donation-shell * { box-sizing: border-box; }

.beacon-donation-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 520px;
	padding: 52px 44px;
	color: var(--beacon-cream);
	background:
		linear-gradient(155deg, rgba(58,79,44,.93), rgba(43,61,35,.94)),
		var(--beacon-panel-image, none),
		linear-gradient(155deg, var(--beacon-panel-2), var(--beacon-panel-1));
	background-size: cover;
	background-position: center;
}

.beacon-donation-panel::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: .42;
	pointer-events: none;
	background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
	background-size: 18px 18px;
}

.beacon-donation-panel > * { position: relative; z-index: 1; }

.beacon-donation-panel__eyebrow,
.beacon-donation-form__kicker,
.beacon-donation-custom-label {
	font: 700 12px/1 'Hanken Grotesk', sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.beacon-donation-panel__eyebrow { color: var(--beacon-wheat); margin: 0 0 auto; }
.beacon-donation-panel__body { margin-top: 32px; }
.beacon-donation-panel__body h3 {
	margin: 0;
	font-family: 'Newsreader', serif;
	font-weight: 400;
	font-size: clamp(32px, 4vw, 44px);
	line-height: 1.08;
	color: #fff;
}
.beacon-donation-panel__body p { max-width: 34ch; margin: 16px 0 0; color: #dfe6d3; font-size: 14.5px; line-height: 1.65; }
.beacon-donation-panel__trust { margin: 28px 0 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); color: #cdd6bf; font-size: 12.5px; }

.beacon-donation-form { padding: 46px 44px 40px; background: var(--beacon-paper); }
.beacon-donation-form__kicker { color: var(--beacon-muted); margin: 0 0 18px; }

.beacon-donation-frequency { display: flex; gap: 2px; border-bottom: 1.5px solid var(--beacon-line); margin-bottom: 24px; }
.beacon-donation-frequency label { flex: 1; position: relative; cursor: pointer; }
.beacon-donation-frequency input { position: absolute; opacity: 0; pointer-events: none; }
.beacon-donation-frequency span { display: block; padding: 12px 6px 14px; color: var(--beacon-muted); font-weight: 700; text-align: center; }
.beacon-donation-frequency input:checked + span { color: var(--beacon-forest-deep); }
.beacon-donation-frequency input:checked + span::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -1.5px; height: 2.5px; background: var(--beacon-forest); border-radius: 3px; }

.beacon-donation-amounts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.beacon-donation-amount { display: flex; align-items: center; gap: 11px; border: 1.5px solid var(--beacon-line); border-radius: 13px; padding: 14px 15px; cursor: pointer; transition: border-color .2s, background .2s, color .2s, transform .15s; }
.beacon-donation-amount:hover { border-color: #9bb088; transform: translateY(-1px); }
.beacon-donation-amount input { position: absolute; opacity: 0; pointer-events: none; }
.beacon-donation-amount__dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--beacon-line); flex: none; position: relative; }
.beacon-donation-amount__value { font: 500 17px 'Newsreader', serif; color: inherit; }
.beacon-donation-amount.is-selected,
.beacon-donation-amount:has(input:checked) { background: var(--beacon-forest); border-color: var(--beacon-forest); color: var(--beacon-cream); }
.beacon-donation-amount.is-selected .beacon-donation-amount__dot,
.beacon-donation-amount:has(input:checked) .beacon-donation-amount__dot { border-color: #fff; }
.beacon-donation-amount.is-selected .beacon-donation-amount__dot::after,
.beacon-donation-amount:has(input:checked) .beacon-donation-amount__dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #fff; }

.beacon-donation-custom-label { display: block; color: var(--beacon-muted); margin-bottom: 9px; }
.beacon-donation-custom { display: flex; align-items: center; border: 1.5px solid var(--beacon-line); border-radius: 13px; padding: 0 16px; margin-bottom: 22px; background: var(--beacon-field); transition: border-color .2s, box-shadow .2s, background .2s; }
.beacon-donation-custom:focus-within { border-color: var(--beacon-forest); background: var(--beacon-paper); box-shadow: 0 0 0 3px #eef2e7; }
.beacon-donation-custom span { margin-right: 6px; color: var(--beacon-forest); font: 500 18px 'Newsreader', serif; }
.beacon-donation-custom input { flex: 1; width: 100%; border: 0; outline: none; background: transparent; padding: 15px 0; color: var(--beacon-ink); font: 500 17px 'Hanken Grotesk', sans-serif; }
.beacon-donation-custom input::placeholder { color: var(--beacon-muted); font-weight: 400; }

.beacon-donation-summary { min-height: 24px; margin: 0 0 16px; color: var(--beacon-bark); font-size: 14.5px; text-align: center; }
.beacon-donation-summary strong { color: var(--beacon-forest-deep); font-family: 'Newsreader', serif; font-size: 17px; font-weight: 500; }
.beacon-donation-submit { width: 100%; border: 0; border-radius: 13px; padding: 17px; cursor: pointer; background: linear-gradient(180deg, #477a3f, var(--beacon-forest)); color: var(--beacon-cream); font: 700 16px 'Hanken Grotesk', sans-serif; box-shadow: 0 14px 26px -13px var(--beacon-forest-deep), 0 1px 0 rgba(255,255,255,.2) inset; }
.beacon-donation-submit:hover { transform: translateY(-2px); filter: brightness(1.04); }
.beacon-donation-reassure { margin: 12px 0 0; color: var(--beacon-muted); font-size: 12px; text-align: center; }
.beacon-donation-shell script { display: none !important; }

@media (max-width: 760px) { .beacon-donation-shell { grid-template-columns: 1fr; max-width: 480px; } .beacon-donation-panel { min-height: 360px; padding: 40px 32px 36px; } .beacon-donation-panel__eyebrow { margin-bottom: 24px; } .beacon-donation-form { padding: 36px 32px 32px; } }
@media (max-width: 420px) { .beacon-donation-amounts { grid-template-columns: 1fr 1fr; gap: 9px; } .beacon-donation-amount { padding: 13px; } }

/* Input contrast hardening for custom amount */
.beacon-donation-shell .beacon-donation-custom input,
.beacon-donation-shell input#beacon-custom-amount {
	color: #2f2418 !important;
	-webkit-text-fill-color: #2f2418 !important;
	caret-color: #2f2418 !important;
	background: transparent !important;
	opacity: 1 !important;
}

.beacon-donation-shell .beacon-donation-custom input::placeholder,
.beacon-donation-shell input#beacon-custom-amount::placeholder {
	color: #8c7a62 !important;
	-webkit-text-fill-color: #8c7a62 !important;
	opacity: 1 !important;
}

.beacon-donation-shell .beacon-donation-custom input:focus,
.beacon-donation-shell input#beacon-custom-amount:focus {
	color: #2f2418 !important;
	-webkit-text-fill-color: #2f2418 !important;
	caret-color: #2f2418 !important;
	outline: none !important;
}

.beacon-donation-shell input#beacon-custom-amount:-webkit-autofill,
.beacon-donation-shell input#beacon-custom-amount:-webkit-autofill:hover,
.beacon-donation-shell input#beacon-custom-amount:-webkit-autofill:focus {
	-webkit-text-fill-color: #2f2418 !important;
	caret-color: #2f2418 !important;
	box-shadow: 0 0 0 1000px #fbf7ef inset !important;
}