/* ==========================================================================
   Waste Matters Donate — Frontend Styles
   --------------------------------------------------------------------------
   - All selectors scoped under .wmf-donate-wrap so styles can't leak out.
   - All rules use !important to override theme/plugin styles.
   - WCAG 2.1 AA: visible focus indicators, 4.5:1 contrast, reduced-motion.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700;9..144,900&family=Manrope:wght@400;500;600;700;800&display=swap');

.wmf-donate-wrap,
.wmf-donate-wrap *,
.wmf-donate-wrap *::before,
.wmf-donate-wrap *::after {
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
}

.wmf-donate-wrap {
	--wmf-navy:    #0D3A6B;
	--wmf-green:   #66BB6A;
	--wmf-green2:  #4CAF50;
	--wmf-green3:  #2E7D32;   /* darker green for AA contrast on light bg */
	--wmf-white:   #ffffff;
	--wmf-off:     #F5F3EE;
	--wmf-text:    #1a1a1a;
	--wmf-muted:   #4a5568;   /* darkened from #6b7280 for ≥4.5:1 contrast */
	--wmf-border:  rgba(13,58,107,0.18);
	--wmf-focus:   #1B5E20;   /* high-contrast focus ring */

	--wmf-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--wmf-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

	font-family: var(--wmf-font-body) !important;
	font-size: 17px !important;
	line-height: 1.7 !important;
	color: var(--wmf-text) !important;
	background: var(--wmf-white) !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
}

/* Screen-reader-only utility */
.wmf-donate-wrap .wmf-donate-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Global focus ring (visible, high-contrast) */
.wmf-donate-wrap a:focus-visible,
.wmf-donate-wrap button:focus-visible,
.wmf-donate-wrap input:focus-visible,
.wmf-donate-wrap select:focus-visible,
.wmf-donate-wrap textarea:focus-visible,
.wmf-donate-wrap [tabindex]:focus-visible {
	outline: 3px solid var(--wmf-focus) !important;
	outline-offset: 2px !important;
	border-radius: 4px !important;
}

/* HERO */
.wmf-donate-wrap .wmf-donate-hero {
	position: relative !important;
	min-height: 400px !important;
	display: flex !important;
	align-items: flex-end !important;
	overflow: hidden !important;
}
.wmf-donate-wrap .wmf-donate-hero__bg {
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(135deg, rgba(13,58,107,0.95) 0%, rgba(10,46,87,0.95) 100%) !important;
}
.wmf-donate-wrap .wmf-donate-hero__inner {
	position: relative !important;
	z-index: 1 !important;
	max-width: 1120px !important;
	margin: 0 auto !important;
	padding: 60px 48px !important;
	width: 100% !important;
}
.wmf-donate-wrap .wmf-donate-eyebrow {
	display: inline-block !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 3px !important;
	text-transform: uppercase !important;
	color: #B8E6BC !important;     /* ≥4.5:1 on dark navy */
	margin-bottom: 16px !important;
}
.wmf-donate-wrap .wmf-donate-hero__title {
	font-family: var(--wmf-font-display) !important;
	font-weight: 900 !important;
	font-size: clamp(40px, 6vw, 64px) !important;
	line-height: 1.02 !important;
	color: #fff !important;
	letter-spacing: -1px !important;
	margin-bottom: 16px !important;
}
.wmf-donate-wrap .wmf-donate-hero__title span {
	color: #B8E6BC !important;
}
.wmf-donate-wrap .wmf-donate-hero__desc {
	max-width: 540px !important;
	font-size: 17px !important;
	line-height: 1.75 !important;
	color: rgba(255,255,255,0.95) !important;
}

/* SECTION */
.wmf-donate-wrap .wmf-donate-section {
	padding: 80px 0 !important;
}
.wmf-donate-wrap .wmf-donate-inner {
	max-width: 1120px !important;
	margin: 0 auto !important;
	padding: 0 48px !important;
}

/* DONATION OPTIONS — two-column: form card + impact aside */
.wmf-donate-wrap .wmf-donate-type {
	display: grid !important;
	grid-template-columns: 1.15fr 0.85fr !important;
	align-items: stretch !important;
	gap: 32px !important;
	margin-bottom: 0 !important;
}
.wmf-donate-wrap .wmf-donate-card {
	background: #fff !important;
	border: 1.5px solid var(--wmf-border) !important;
	border-radius: 22px !important;
	padding: 44px !important;
	text-align: center !important;
	width: 100% !important;
	box-shadow: 0 10px 40px rgba(13,58,107,0.07) !important;
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease !important;
}
.wmf-donate-wrap .wmf-donate-card:hover {
	border-color: var(--wmf-green2) !important;
	box-shadow: 0 18px 54px rgba(76,175,80,0.16) !important;
	transform: translateY(-3px) !important;
}
.wmf-donate-wrap .wmf-donate-card h2 {
	font-family: var(--wmf-font-display) !important;
	font-weight: 700 !important;
	font-size: 27px !important;
	letter-spacing: -0.4px !important;
	color: var(--wmf-navy) !important;
	margin-bottom: 10px !important;
}
.wmf-donate-wrap .wmf-donate-card > p {
	font-size: 15px !important;
	line-height: 1.7 !important;
	color: var(--wmf-muted) !important;
	margin-bottom: 32px !important;
}

/* Hide native fieldset chrome */
.wmf-donate-wrap .wmf-donate-fieldset {
	border: 0 !important;
}

/* AMOUNTS GRID */
.wmf-donate-wrap .wmf-donate-amounts {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 12px !important;
	margin-bottom: 24px !important;
}
.wmf-donate-wrap .wmf-donate-amount-btn {
	background: var(--wmf-off) !important;
	border: 2px solid transparent !important;
	border-radius: 12px !important;
	padding: 16px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--wmf-navy) !important;
	cursor: pointer !important;
	transition: background .2s ease, border-color .2s ease, color .2s ease !important;
	font-family: inherit !important;
	min-height: 48px !important;
}
.wmf-donate-wrap .wmf-donate-amount-btn:hover {
	border-color: var(--wmf-green2) !important;
	background: rgba(76,175,80,0.08) !important;
}
.wmf-donate-wrap .wmf-donate-amount-btn[aria-checked="true"],
.wmf-donate-wrap .wmf-donate-amount-btn.wmf-donate-active {
	background: var(--wmf-green3) !important;   /* AA-compliant white on green */
	color: #fff !important;
	border-color: var(--wmf-green3) !important;
}

/* Custom input */
.wmf-donate-wrap .wmf-donate-custom-input {
	width: 100% !important;
	padding: 14px 16px !important;
	border: 1.5px solid var(--wmf-border) !important;
	border-radius: 10px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--wmf-navy) !important;
	margin-bottom: 16px !important;
	font-family: var(--wmf-font-body) !important;
	background: #fcfcfb !important;
	min-height: 50px !important;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.wmf-donate-wrap .wmf-donate-custom-input::placeholder {
	color: #8a93a3 !important;
	font-weight: 500 !important;
	opacity: 1 !important;
}
.wmf-donate-wrap .wmf-donate-custom-input:focus {
	border-color: var(--wmf-green3) !important;
	background: #fff !important;
	box-shadow: 0 0 0 3px rgba(46,125,50,0.12) !important;
}

/* Donor details */
.wmf-donate-wrap .wmf-donate-details {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	margin-bottom: 22px !important;
	text-align: left !important;
}
.wmf-donate-wrap .wmf-donate-field {
	display: block !important;
	width: 100% !important;
}
.wmf-donate-wrap .wmf-donate-details input {
	width: 100% !important;
	padding: 14px 16px !important;
	border: 1.5px solid var(--wmf-border) !important;
	border-radius: 10px !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	color: var(--wmf-navy) !important;
	font-family: var(--wmf-font-body) !important;
	background: #fcfcfb !important;
	min-height: 50px !important;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.wmf-donate-wrap .wmf-donate-details input::placeholder {
	color: #8a93a3 !important;
	font-weight: 500 !important;
	opacity: 1 !important;
	text-transform: none !important;
}
.wmf-donate-wrap .wmf-donate-details input:hover {
	border-color: rgba(13,58,107,0.32) !important;
}
.wmf-donate-wrap .wmf-donate-details input:focus {
	border-color: var(--wmf-green3) !important;
	background: #fff !important;
	box-shadow: 0 0 0 3px rgba(46,125,50,0.12) !important;
}

/* Donate button */
.wmf-donate-wrap .wmf-donate-btn {
	width: 100% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	background: var(--wmf-green3) !important;
	color: #fff !important;
	border: none !important;
	padding: 14px 24px !important;
	border-radius: 8px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
	cursor: pointer !important;
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease !important;
	font-family: inherit !important;
	min-height: 48px !important;
}
.wmf-donate-wrap .wmf-donate-btn:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 20px rgba(46,125,50,0.3) !important;
}
.wmf-donate-wrap .wmf-donate-btn[aria-busy="true"],
.wmf-donate-wrap .wmf-donate-btn:disabled {
	opacity: 0.65 !important;
	cursor: not-allowed !important;
	transform: none !important;
	box-shadow: none !important;
}

/* Secure badge */
.wmf-donate-wrap .wmf-donate-secure-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 12px !important;
	color: var(--wmf-muted) !important;
	margin-top: 12px !important;
	font-weight: 600 !important;
}

/* ============================================================
   IMPACT LIST — accessible markup
   ============================================================ */
.wmf-donate-wrap .wmf-donate-impact-note {
	display: flex !important;
	flex-direction: column !important;
	background: linear-gradient(160deg, #0D3A6B 0%, #0A2E57 100%) !important;
	border-radius: 22px !important;
	padding: 40px 34px !important;
	margin: 0 !important;
	position: relative !important;
	overflow: hidden !important;
	box-shadow: 0 10px 40px rgba(13,58,107,0.18) !important;
}
.wmf-donate-wrap .wmf-donate-impact-note::after {
	content: "" !important;
	position: absolute !important;
	right: -60px !important;
	bottom: -60px !important;
	width: 200px !important;
	height: 200px !important;
	background: radial-gradient(circle, rgba(102,187,106,0.22) 0%, rgba(102,187,106,0) 70%) !important;
	pointer-events: none !important;
}
.wmf-donate-wrap .wmf-donate-impact-eyebrow {
	display: inline-block !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 2.5px !important;
	text-transform: uppercase !important;
	color: #8FE0A6 !important;
	margin-bottom: 10px !important;
}
.wmf-donate-wrap .wmf-donate-impact-title {
	font-family: var(--wmf-font-display) !important;
	font-weight: 700 !important;
	font-size: 26px !important;
	letter-spacing: -0.3px !important;
	color: #ffffff !important;
	margin-bottom: 10px !important;
}
.wmf-donate-wrap .wmf-donate-impact-intro {
	font-size: 14px !important;
	line-height: 1.65 !important;
	color: rgba(255,255,255,0.82) !important;
	margin-bottom: 26px !important;
}
.wmf-donate-wrap .wmf-donate-impact-list {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	flex: 1 1 auto !important;
	gap: 18px !important;
	margin-bottom: 26px !important;
}
.wmf-donate-wrap .wmf-donate-impact-item {
	display: grid !important;
	grid-template-columns: auto 1fr !important;
	column-gap: 14px !important;
	align-items: start !important;
	padding-bottom: 16px !important;
	border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}
.wmf-donate-wrap .wmf-donate-impact-item:last-child {
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
}
.wmf-donate-wrap .wmf-donate-impact-term {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	font-weight: 800 !important;
	font-size: 16px !important;
	color: #ffffff !important;
	white-space: nowrap !important;
}
.wmf-donate-wrap .wmf-donate-impact-check {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 24px !important;
	height: 24px !important;
	border-radius: 50% !important;
	background: var(--wmf-green) !important;
	color: #0D3A6B !important;
	flex-shrink: 0 !important;
}
.wmf-donate-wrap .wmf-donate-impact-desc {
	font-size: 14px !important;
	line-height: 1.55 !important;
	color: rgba(255,255,255,0.88) !important;
	align-self: center !important;
}
.wmf-donate-wrap .wmf-donate-impact-foot {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin-top: auto !important;
	padding: 16px 18px !important;
	background: rgba(255,255,255,0.07) !important;
	border: 1px solid rgba(255,255,255,0.12) !important;
	border-radius: 14px !important;
}
.wmf-donate-wrap .wmf-donate-impact-foot-icon {
	font-size: 22px !important;
	line-height: 1 !important;
	flex-shrink: 0 !important;
}
.wmf-donate-wrap .wmf-donate-impact-foot p {
	margin: 0 !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	font-weight: 600 !important;
	color: rgba(255,255,255,0.92) !important;
}

/* ============================================================
   RESULT MODAL
   ============================================================ */
.wmf-donate-wrap .wmf-donate-modal-overlay {
	position: fixed !important;
	inset: 0 !important;
	background: rgba(13,58,107,0.72) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 99999 !important;
	padding: 20px !important;
}
.wmf-donate-wrap .wmf-donate-modal-overlay[hidden] {
	display: none !important;
}
.wmf-donate-wrap .wmf-donate-modal {
	background: #fff !important;
	border-radius: 16px !important;
	padding: 40px !important;
	max-width: 440px !important;
	width: 100% !important;
	text-align: center !important;
	box-shadow: 0 24px 64px rgba(0,0,0,0.2) !important;
}
.wmf-donate-wrap .wmf-donate-modal:focus {
	outline: none !important;
}
.wmf-donate-wrap .wmf-donate-modal-icon {
	width: 64px !important;
	height: 64px !important;
	margin: 0 auto 20px !important;
	background: var(--wmf-green3) !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #fff !important;
	font-size: 32px !important;
}
.wmf-donate-wrap .wmf-donate-modal-icon.wmf-donate-error {
	background: #b91c1c !important;
}
.wmf-donate-wrap .wmf-donate-modal h3 {
	font-family: var(--wmf-font-display) !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	color: var(--wmf-navy) !important;
	margin-bottom: 12px !important;
}
.wmf-donate-wrap .wmf-donate-modal p {
	font-size: 14px !important;
	color: var(--wmf-muted) !important;
	margin-bottom: 8px !important;
	line-height: 1.6 !important;
}
.wmf-donate-wrap .wmf-donate-payment-id {
	background: var(--wmf-off) !important;
	padding: 12px !important;
	border-radius: 8px !important;
	font-family: monospace !important;
	font-size: 12px !important;
	color: var(--wmf-navy) !important;
	margin: 16px 0 !important;
	word-break: break-all !important;
}
.wmf-donate-wrap .wmf-donate-modal-close {
	background: var(--wmf-green3) !important;
	color: #fff !important;
	border: none !important;
	padding: 12px 28px !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	margin-top: 12px !important;
	font-family: inherit !important;
	min-height: 44px !important;
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.wmf-donate-wrap *,
	.wmf-donate-wrap *::before,
	.wmf-donate-wrap *::after {
		transition: none !important;
		animation: none !important;
	}
	.wmf-donate-wrap .wmf-donate-card:hover,
	.wmf-donate-wrap .wmf-donate-btn:hover {
		transform: none !important;
	}
}

/* ============================================================
   High-contrast / forced-colors mode
   ============================================================ */
@media (forced-colors: active) {
	.wmf-donate-wrap .wmf-donate-amount-btn[aria-checked="true"],
	.wmf-donate-wrap .wmf-donate-btn,
	.wmf-donate-wrap .wmf-donate-modal-close {
		border: 2px solid CanvasText !important;
	}
	.wmf-donate-wrap .wmf-donate-impact-check {
		border: 2px solid CanvasText !important;
	}
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
	.wmf-donate-wrap .wmf-donate-inner,
	.wmf-donate-wrap .wmf-donate-hero__inner {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	.wmf-donate-wrap .wmf-donate-hero__inner {
		padding-top: 48px !important;
		padding-bottom: 48px !important;
	}
	.wmf-donate-wrap .wmf-donate-type {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}
	.wmf-donate-wrap .wmf-donate-amounts {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}
@media (max-width: 560px) {
	.wmf-donate-wrap .wmf-donate-section {
		padding: 60px 0 !important;
	}
	.wmf-donate-wrap .wmf-donate-hero {
		min-height: 320px !important;
	}
	.wmf-donate-wrap .wmf-donate-hero__inner {
		padding: 40px 24px !important;
	}
	.wmf-donate-wrap .wmf-donate-card {
		padding: 28px 20px !important;
	}
	.wmf-donate-wrap .wmf-donate-card h2 {
		font-size: 20px !important;
	}
	.wmf-donate-wrap .wmf-donate-amounts {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.wmf-donate-wrap .wmf-donate-impact-note {
		padding: 30px 24px !important;
	}
	.wmf-donate-wrap .wmf-donate-impact-item {
		grid-template-columns: auto 1fr !important;
		column-gap: 12px !important;
	}
	.wmf-donate-wrap .wmf-donate-modal {
		padding: 28px 20px !important;
	}
}

/* =====================================================================
   Field-level validation error styles
   ===================================================================== */
.wmf-donate-wrap input.wmf-donate-field-error {
	border-color: #c0392b !important;
	background: #fff8f8 !important;
}
.wmf-donate-wrap .wmf-donate-field-error-msg {
	display: block !important;
	color: #c0392b !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	margin-top: 4px !important;
	padding-left: 2px !important;
}