[id="donatenow"] {
  scroll-margin-top: 120px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  column-gap: 1rem;
  row-gap: 1rem;
}
@media (min-width: 768px)
{	
	.grid {
	  grid-template-columns: repeat(12, 1fr);
	}
	.grid .field-span-2 {
		grid-column: span 2;
	}
	.grid .field-span-3 {
		grid-column: span 3;
	}
	.grid .field-span-4 {
		grid-column: span 4;
	}
	.grid .field-span-5 {
		grid-column: span 5;
	}
	.grid .field-span-6 {
		grid-column: span 6;
	}
}

.be-the-hero-header {
	width: 150px;
	display: inline-block;
	position: relative;
	top: 25px;
}

h1.bth {
	line-height: 1.5;
	margin-top: -21px;
}
@media (min-width: 900px)
{
	.be-the-hero-header {
		width: 190px;
	}
	h1.bth {
		line-height: 1.3;	
	}
}
.bth span {
	position: relative;
	margin-bottom: -60px;
	display: block;	
}

.donate-toggle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: url(/assets/toggle_bg.svg) no-repeat center;
  background-size: contain;
  color:  var(--yellow);      /* yellow text */
  font-family: "Veneer", sans-serif;
  font-weight: 100;
  font-size: 2rem;
  text-transform: uppercase;
  padding: 25px;
  border-radius: 8px;
  position: relative;
  gap: 2rem;
  margin: 2rem 0;
  width: 100%;
  height: 120px;
}
@media (min-width: 1000px)
{
	.donate-toggle {
	  margin: 2rem;
	  width: auto;
	  height: auto;
	}
}

.donate-toggle::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--purple);
}

.toggle-btn {
  background: none;
  border: none;
  color: inherit;
  padding: 10px 15px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border-radius: 6px;
}
.toggle-btn.annual {
	display: none;
}

@media (max-width: 999px)
{
	.toggle-btn {
		font-size: 1.7rem
	}
}
@media (min-width: 1000px)
{
	.toggle-btn.annual {
		display: block;
	}
}

.toggle-btn:hover {
  opacity: 0.8;
}

.toggle-btn.is-active {
  background: var(--yellow); /* yellow */
  color:  var(--purple); /* yellow */
}

.donate-label {
  margin-top: 10px;
  text-align: center;
  font-weight: 100;
  color: #000;
}

.donate-amounts {
  max-width: 540px;
  margin: 1rem auto;
  text-align: center;
  font-family: "Veneer", sans-serif;
}

.amount-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  justify-items: center;
  margin-bottom: 1.5rem;
}

/* Square framed buttons */
.amount-btn {
  width: 70px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font: 100 2rem/1 "Veneer", sans-serif;
  color: var(--black);
  border: 0;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .2s ease;
  padding: 5px;

  /* FRAME ONLY (no fill) */
  background-image: url('/assets/frame_s.svg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-origin: border-box;             /* position frame on the border box */
  background-clip: border-box;               /* clip frame to border box */
}

@media (min-with: 800px)
{
	.amount-btn {
	  width: 100px;
	}
}

/* Hover nicety */
.amount-btn:hover { transform: translateY(-2px); }


.amount-btn[aria-pressed="true"] {
  /* top layer = frame; bottom layer = yellow fill clipped to content box */
  background-image: url('/assets/frame_s.svg'), linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%;
  background-origin: border-box, content-box;
  background-clip: border-box, content-box;
}
.donate_1col .donate_amount button.selected{
  background-image: url('/assets/frame_s.svg'), linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%;
  background-origin: border-box, content-box;
  background-clip: border-box, content-box;
}

/* Other amount field */
.other-label {
  font-weight: 700;
  display:block;
  margin-bottom:.4rem;
}

.frame-input {
	position: relative;
	display: inline-block;
	width: 100%;
	border-radius: 1px;
	background: #fff;
	border: 18px solid transparent;
	border-image: url(/assets/frame_s.svg) 25 stretch;
	border-image-width: 20px;
	border-image-outset: 0;
	
}
.other-input {
	font-size: 2rem
}
span.currency {
	font-size: 2rem
}
.other-wrap .currency {
	position: absolute;
	left: 4px;
	top: -7px;
	font-size: 3rem
}
.other-wrap .frame-input {
	width: 170px;
	padding-left: 50px;
}
.other-wrap label {
	text-align: center
}

.other-wrap .frame-input > input {
	font-size: 3rem
}



label {
	text-transform: uppercase;
	font-size: 1rem;
	color: var(--purple);
	font-family: "veneer";
	text-align: left
}
/* Common control reset inside the frame */
.frame-input > input,
.frame-input > select,
.frame-input > textarea{
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font: 100 1rem/1.2 veneer, system-ui, sans-serif;
  color: #000;
  padding: 0;                       /* padding handled by the wrapper */
  margin: 0;
}

/* Placeholder colour */
.frame-input ::placeholder{ color:#6b6b6b; opacity:1; }

/* Focus state: subtle glow without changing the SVG */
.frame-input.is-focus{ box-shadow: 0 0 0 4px #412D7D26; }

/* Error state */
.frame-input.is-error{ box-shadow: 0 0 0 4px #B0002040; }
.frame-input.is-error > input,
.frame-input.is-error > select,
.frame-input.is-error > textarea{ color:#B00020; }

/* Disabled */
.frame-input.is-disabled,
.frame-input:has(> :disabled){
  opacity:.6;
  pointer-events:none;
}

/* Optional compact modifier */
.frame-input--compact{ padding:8px 12px; }

/* Currency prefix (if needed) */
.frame-input .prefix{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  font-weight:800; color:var(--brand-purple);
}
.frame-input.has-prefix{ padding-left:34px; }


/* Make select look consistent while keeping native UI */
.frame-input > select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 28px;
  background-image:
	linear-gradient(transparent,transparent),
	url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='14' viewBox='0 0 28 19'><path d='M28.002 4.06445L23.9375 0L14.0007 9.93555L4.06445 0L0 4.06445L14.0007 18.0645L28.002 4.06445Z' fill='%23412D7D'/></svg>");
  background-repeat: no-repeat, no-repeat;
  background-position: right 8px center, right 8px center;
  background-size: 18px 12px, 18px 12px;
}

/* Focus handling without JS for modern browsers */
.frame-input:focus-within{ box-shadow: 0 0 0 4px #412D7D26; }


.donate_address {
	max-height: 0;
	overflow: hidden;
	transition: all .3s 
	ease;
}
.donate_address.open {
	max-height: 500px;
}
.selectwrap select {
	appearance: auto;
	padding: 10px;
	border: 3px solid var(--pink);
	width: Calc(100% - 3px);
	background: #ed1b8f;
	color: #fff;
	margin-top: -3px;
	position: relative;
	top: -1px;
	left: 3px;
}

.donate_pay {
	max-width: 400px;
	margin: 0 auto 10rem auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 1rem;
	row-gap: 1rem;
	justify-content: center;
	align-items: center;
}

.donate_pay .cta-button {
	background: var(--purple);
	color: var(--white);
	text-transform: uppercase;
}
.donate_pay .cta-button:hover {
	color: var(--pink);
}
.donate_pay div {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 40px;
}
.cta-button.bypaypal img {
	height: 24px
}
@media (max-width: 767px)
{
	.donate_pay .cta-button {
		height: 66px
	}
}
@media (min-width: 768px)
{
	.cta-button.bypaypal {
		height: 84px
	}
}
.pay_card {
	background: url(/assets/cards.svg) no-repeat bottom center;
	background-size: 150px
}


.donation-options {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
  max-width: 500px;
  margin: 0 auto;
  padding: 0 1rem
}
.donation-options label {
	text-transform: none
}

.option-block {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  position: relative;
  cursor: pointer;
  border: none;
}

.option-block input[type="checkbox"] {
  display: none;
}

.check-frame {
  width: 50px;
  height: 50px;
  min-width: 50px;
  background: url('/assets/frame_s.svg') no-repeat center/contain;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.option-block input:checked + .check-frame {
  background-image: url('/assets/frame_s.svg');
}
.option-block input:checked + .check-frame::after {
  content: "";
  width: 22px;
  height: 22px;
  background: url('/assets/brand_tick.svg') no-repeat center/contain;
}

.option-content h3 {
  font-family: 'Veneer', sans-serif;
  font-size: 1.2rem;
  color: var(--purple);
  margin: 0 0 0.25rem;
}

.option-content p {
  margin: 0;
  color: #222;
  font-size: 0.95rem;
  font-family: Verdana;
}

.option-content .hero {
  background: var(--green);
  color: #fff;
  padding: 0 0.3em;
}

.option-block .giftaid-logo {
  position: absolute;
  right: 0;
  bottom: -20px;
  height: 2.5rem;
}

.option-content p.small-print {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: #555;
}

.donate_intro--cta {
	margin: 2rem 0
}
.is-invalid {
  border-color: var(--pink);
  outline: none;
  border-bottom: 3px solid var(--pink);
}
.frame-input > input.is-invalid {
  border-color: var(--pink);
  outline: none;
  border-bottom: 3px solid var(--pink);
}
.error {
  color: var(--pink);
  font-size: 0.9em;
  margin-top: 4px;
}
label .error-inline {
  color: var(--pink);
  font-size: 0.8em;	
  text-transform: initial
}