/* ===========================================================
   Donation pages — shared scoped styles
   Page-local additions on top of css/website/style.css.
   Used by: donation.html, donation-info.html,
            donation-success.html, donation-cancel.html,
            donation-cancelled.html
   =========================================================== */

.donation-layout{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 2.5rem;
	/* extra top room so the watermark can sit above the content and
	   overlap up onto the blue cap */
	padding: 11rem 0 4.5rem;
}

/* blue cap: the header's blue band continued ~28px into the page so the
   watermark logo straddles blue (top) and white (bottom), as in the Figma. */
.donation-cap{
	width: 100%;
	height: 28px;
	background: var(--bs-primary);
}

/* intro / left column */
.donation-intro{
	flex: 1 1 480px;
	min-width: 280px;
}
.donation-watermark{
	position: absolute;
	top: -28px;        /* rise up so the logo's top meets the top of the blue cap */
	left: 0;
	z-index: 1;
	display: block;
	width: 124px;
	height: auto;
	margin: 0;
}

/* vertical divider */
.donation-divider{
	align-self: stretch;
	width: 1px;
	background: var(--bs-secondary);
	flex-shrink: 0;
}

/* widget / right column */
.donation-widget{
	flex: 1 1 420px;
	max-width: 460px;
}
/* donation-info: pull the widget up so its card aligns higher on the page */
.donation-widget--raised{
	margin-top: -130px;
}

/* ---- plan selection ---- */
.plan-options{ margin-bottom: 2.25rem; }
.plan-card{
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 106px;
	border: 1px solid var(--bs-secondary);
	border-radius: 16px;
	padding: 1rem 1.25rem;
	margin: 0;
	cursor: pointer;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.plan-card:hover{ border-color: var(--bs-primary); }
.plan-card input{ position: absolute; opacity: 0; pointer-events: none; }
.plan-radio{
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid var(--bs-primary);
	position: relative;
}
.plan-card input:checked + .plan-radio::after{
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--bs-primary);
}
.plan-card.is-selected{
	border: 2px solid var(--bs-primary);
	padding: calc(1rem - 1px) calc(1.25rem - 1px);
}
.plan-info{
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
}
.plan-info s{ color: var(--bs-secondary); font-weight: 400; margin-right: .35rem; }

.plan-benefits{ margin-bottom: 2.25rem; }

/* ---- card (form + result steps) ---- */
.donation-card{
	border: 1px solid var(--bs-secondary);
	border-radius: 16px;
	background: #fcfcfc;
	padding: 2.5rem 2.5rem 2.75rem;
}

/* payment methods */
.pay-method{
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.9rem;
	width: 100%;
	border: 1px solid var(--bs-secondary);
	padding: 0.75rem 1rem;
	margin: 0 0 1rem;
	cursor: pointer;
}
.pay-method input{ position: absolute; opacity: 0; pointer-events: none; }
.pay-radio{
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid var(--bs-primary);
	position: relative;
}
.pay-method input:checked + .pay-radio::after{
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--bs-primary);
}
.pay-method.is-selected{ border-color: var(--bs-primary); }
.pay-method-label{ font-weight: 700; font-size: 1rem; color: #000; }
.pay-brands{ margin-left: auto; display: flex; align-items: center; gap: 0.4rem; }
.pay-brands svg{ display: block; height: 24px; width: auto; }

/* consent + note */
.donation-consent{
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 1.5rem 0;
}
.donation-consent input{
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin: 2px 0 0;
	accent-color: var(--bs-primary);
	cursor: pointer;
}
.donation-consent label{ cursor: pointer; }
.donation-note{
	background: var(--bs-light-bg-subtle);
	padding: 1rem 1.25rem;
	margin-bottom: 1.75rem;
}

/* result / centered card pages */
.donation-card--center{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 1.5rem;
	min-height: 396px;
}
.donation-result-text{ max-width: 340px; }
.donation-result-prompt{ max-width: 340px; }
.donation-result-actions{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}

/* bottom decorative band (echoes the Figma mock) */
.donation-main{ padding-bottom: 0; }
.donation-band{
	width: 100%;
	height: 140px;
	background: var(--bs-primary);
}

@media (max-width: 991px){
	.donation-divider{ display: none; }
	.donation-widget{ max-width: 100%; flex-basis: 100%; }
	.donation-widget--raised{ margin-top: 0; }
	.donation-band{ height: 90px; }
}

/* ===========================================================
   Blue masthead (Donation pages) — matches the Figma mock.
   Scoped to .donation-header so the rest of the site is untouched.
   The top logo/social row sits on a full-bleed blue band with
   light content; the nav row below stays on white as on the site.
   =========================================================== */
.app-header.donation-header .main-wrap{
	position: relative;
	border-bottom-color: rgba(255, 255, 255, 0.45);
}
.app-header.donation-header .main-wrap::before{
	content: "";
	position: absolute;
	top: -1.25rem;        /* reach the very top of the page (header padding-top) */
	bottom: -4px;         /* include the divider border */
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--bs-primary);
	z-index: 0;
}
/* keep the masthead content above the blue band */
.app-header.donation-header .main-wrap > *{
	position: relative;
	z-index: 1;
}
/* light content on the blue band */
.app-header.donation-header .main-wrap .logo img{
	filter: brightness(0) invert(1);
}
.app-header.donation-header .main-wrap p{
	color: #fff;
}
.app-header.donation-header .main-wrap .social-items-row{
	--bs-link-color: #fff;
	--icon-color: #fff;
}
.app-header.donation-header .main-wrap .social-items-row a:hover{
	--icon-color: rgba(255, 255, 255, 0.7);
}
/* the donation button reads as a light pill on the blue band */
.app-header.donation-header .main-wrap .btn-primary{
	--bs-btn-color: var(--bs-primary);
	--bs-btn-bg: #fff;
	--bs-btn-border-color: #fff;
	--bs-btn-hover-color: var(--bs-primary);
	--bs-btn-hover-bg: var(--bs-light-bg-subtle);
	--bs-btn-hover-border-color: var(--bs-light-bg-subtle);
	--bs-btn-active-color: var(--bs-primary);
	--bs-btn-active-bg: var(--bs-light);
	--bs-btn-active-border-color: var(--bs-light);
}
.app-header.donation-header .main-wrap .btn-outline-secondary{
	--bs-btn-color: #fff;
	--bs-btn-border-color: rgba(255, 255, 255, 0.6);
	--bs-btn-hover-color: var(--bs-primary);
	--bs-btn-hover-bg: #fff;
	--bs-btn-hover-border-color: #fff;
}

/* --- bottom row (nav + search) on the same blue band --- */
.app-header.donation-header .bottom-wrap{
	position: relative;
	/* drop the 1px bottom border: it only spans the container width, which
	   left a white hairline on the sides between the header blue and the
	   full-width donation-main blue cap */
	border-bottom: 0;
}
.app-header.donation-header .bottom-wrap::before{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--bs-primary);
	z-index: 0;
}
.app-header.donation-header .bottom-wrap > *{
	position: relative;
	z-index: 1;
}
/* nav links + home icon read white on the blue band */
.app-header.donation-header nav a{
	--bs-link-color: #fff;
	--icon-color: #fff;
	color: #fff;
}
.app-header.donation-header nav a:hover{
	--bs-link-color: rgba(255, 255, 255, 0.75);
	--icon-color: rgba(255, 255, 255, 0.75);
	color: rgba(255, 255, 255, 0.75);
}