/* Bena Makenga Donations — generated stylesheet. Edited from Donations → Design. */
.dntn-form{
	--dntn-primary: #022145;
	--dntn-primary-soft: #e6e9ec;
	--dntn-accent: #05785C;
	--dntn-accent-hover: #04674f;
	--dntn-accent-soft: #e6f2ef;
	--dntn-accent-channels: 5, 120, 92;
	--dntn-on-accent: #ffffff;
	--dntn-on-primary: #ffffff;
	--dntn-bg: #ffffff;
	--dntn-bg-alt: #f4f7fa;
	--dntn-text: #022145;
	--dntn-text-muted: #5a6b80;
	--dntn-border: #d3dbe5;
	--dntn-success: #05785C;
	--dntn-warning: #b26a00;
	--dntn-error: #b3261e;
	--dntn-font-heading: "Merriweather", Georgia, serif;
	--dntn-font-body: "Inter", sans-serif;
	--dntn-fs-base: 16px;
	--dntn-fs-sm: 13px;
	--dntn-fs-lg: 20px;
	--dntn-fs-xl: 25px;
	--dntn-fs-2xl: 31px;
	--dntn-lh: 1.55;
	--dntn-lh-heading: 1.2;
	--dntn-space: 8px;
	--dntn-space-2: 16px;
	--dntn-space-3: 24px;
	--dntn-space-4: 32px;
	--dntn-radius: 10px;
	--dntn-radius-button: 8px;
	--dntn-container: 880px;
	--dntn-form-radius: 24px;
	--dntn-form-padding: 56px;
	--dntn-input-height: 48px;
	--dntn-shadow: 0 1px 2px rgba(0,0,0,.05);
	--dntn-shadow-lg: 0 10px 30px rgba(0,0,0,.10);
	--dntn-ring: 0 0 0 3px rgba(5, 120, 92, .35);
	--dntn-ring-soft: rgba(5, 120, 92, .15);
	--dntn-cols: 3;
	--dntn-cols-tablet: 2;
	--dntn-cols-mobile: 1;
}

/* width:100% + min() so the form fills its container but can never be wider
   than it. A form wider than its parent gives the whole page horizontal
   overflow, which dislodges any fixed theme header. */
.dntn-form{box-sizing:border-box;width:100%;max-width:min(var(--dntn-container),100%);
	margin:0 auto;overflow-wrap:break-word;
	font-family:var(--dntn-font-body);font-size:var(--dntn-fs-base);line-height:var(--dntn-lh);
	color:var(--dntn-text);text-align:left}
.dntn-form--card{background:var(--dntn-bg);border-radius:var(--dntn-form-radius);
	padding:var(--dntn-form-padding);box-shadow:var(--dntn-shadow-lg)}

/* The form's own title block: centred, the way a form that owns the page reads.
   Step titles stay left-aligned, since they label a section rather than the page. */
.dntn-form__header{text-align:center;margin-bottom:calc(var(--dntn-space)*4)}
.dntn-form__badge{width:76px;height:76px;margin:0 auto calc(var(--dntn-space)*2.5);
	border-radius:50%;display:flex;align-items:center;justify-content:center;
	background:var(--dntn-accent);color:var(--dntn-on-accent);
	box-shadow:0 8px 24px rgba(0,0,0,.18)}
.dntn-form__badge svg{width:34px;height:34px;fill:currentColor}
.dntn-form__heading{font-size:var(--dntn-fs-2xl);margin:0 0 var(--dntn-space)}
.dntn-form__intro{color:var(--dntn-text-muted);max-width:62ch;margin:0 auto}
.dntn-form *,.dntn-form *::before,.dntn-form *::after{box-sizing:inherit}
.dntn-form h1,.dntn-form h2,.dntn-form h3,.dntn-form .dntn-amount-display{
	font-family:var(--dntn-font-heading);line-height:var(--dntn-lh-heading);
	color:var(--dntn-primary);margin:0 0 var(--dntn-space)}
.dntn-form h2{font-size:var(--dntn-fs-xl)}
.dntn-form h3{font-size:var(--dntn-fs-lg)}
.dntn-form p{margin:0 0 var(--dntn-space)}
.dntn-form small,.dntn-form .dntn-help{font-size:var(--dntn-fs-sm);color:var(--dntn-text-muted)}

/* Control reset — assume nothing about the theme. */
.dntn-form input[type=text],.dntn-form input[type=email],.dntn-form input[type=tel],
.dntn-form input[type=url],.dntn-form input[type=number],.dntn-form input[type=date],
.dntn-form input[type=time],.dntn-form input[type=search],.dntn-form select,.dntn-form textarea{
	appearance:none;-webkit-appearance:none;width:100%;min-height:var(--dntn-input-height);
	padding:0 calc(var(--dntn-space)*1.5);border:1px solid var(--dntn-border);
	border-radius:var(--dntn-radius);background:var(--dntn-bg);color:var(--dntn-text);
	font-family:inherit;font-size:var(--dntn-fs-base);line-height:1.4;box-shadow:none;
	transition:border-color .15s ease,box-shadow .15s ease}
.dntn-form textarea{padding-top:calc(var(--dntn-space)*1.25);min-height:calc(var(--dntn-input-height)*2)}
.dntn-form select{background-image:none;padding-right:calc(var(--dntn-space)*4)}
.dntn-form input:focus,.dntn-form select:focus,.dntn-form textarea:focus{
	outline:none;border-color:var(--dntn-accent);box-shadow:var(--dntn-ring)}
.dntn-form label{display:block;font-weight:600;font-size:var(--dntn-fs-sm);
	color:var(--dntn-primary);margin-bottom:calc(var(--dntn-space)*.5)}

/* Focus ring is never removed: it is the only affordance a keyboard donor has. */
.dntn-form :focus-visible{outline:3px solid var(--dntn-accent);outline-offset:2px}

.dntn-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
	min-height:var(--dntn-input-height);padding:0 calc(var(--dntn-space)*3);
	border-radius:var(--dntn-radius-button);font-family:var(--dntn-font-body);
	font-size:var(--dntn-fs-base);font-weight:600;cursor:pointer;text-decoration:none;
	transition:background .15s ease,border-color .15s ease,color .15s ease;background:var(--dntn-accent);color:var(--dntn-on-accent);border:1px solid var(--dntn-accent)}
.dntn-btn:hover{background:var(--dntn-accent-hover);border-color:var(--dntn-accent-hover)}
.dntn-btn--ghost{background:transparent;color:var(--dntn-text-muted);border-color:var(--dntn-border)}
.dntn-btn--ghost:hover{background:var(--dntn-bg-alt);color:var(--dntn-text)}
.dntn-btn[disabled]{opacity:.5;cursor:not-allowed}

.dntn-grid{display:grid;gap:calc(var(--dntn-space)*2);max-width:100%;
	grid-template-columns:repeat(var(--dntn-cols),minmax(0,1fr))}

.dntn-card{display:flex;flex-direction:column;gap:calc(var(--dntn-space)*1.5);
	padding:calc(var(--dntn-space)*2.5);border-radius:var(--dntn-radius);
	background:var(--dntn-bg);text-align:left;cursor:pointer;width:100%;
	font-family:inherit;color:inherit;transition:border-color .15s ease,box-shadow .15s ease;border:1px solid var(--dntn-border)}
.dntn-card:hover{border-color:var(--dntn-accent)}
.dntn-card[aria-pressed=true],.dntn-card.is-selected{
	border-color:var(--dntn-accent);box-shadow:0 0 0 1px var(--dntn-accent);
	background:var(--dntn-accent-soft)}
.dntn-card__title{font-family:var(--dntn-font-heading);font-size:var(--dntn-fs-lg);
	color:var(--dntn-primary);margin:0}
.dntn-card__summary{font-size:var(--dntn-fs-sm);color:var(--dntn-text-muted);margin:0}
.dntn-card__check{width:24px;height:24px;border-radius:50%;
	background:var(--dntn-accent);color:var(--dntn-on-accent);
	display:none;align-items:center;justify-content:center}
.dntn-card[aria-pressed=true] .dntn-card__check{display:inline-flex}

.dntn-chip{display:inline-flex;align-items:center;justify-content:center;
	min-height:var(--dntn-input-height);padding:0 calc(var(--dntn-space)*2.5);
	border:1px solid var(--dntn-border);border-radius:var(--dntn-radius-button);
	background:var(--dntn-bg);color:var(--dntn-text);font-weight:600;cursor:pointer;
	font-family:inherit;font-size:var(--dntn-fs-base)}
.dntn-chip[aria-pressed=true]{background:var(--dntn-accent);border-color:var(--dntn-accent);
	color:var(--dntn-on-accent)}
.dntn-chips{display:flex;flex-wrap:wrap;max-width:100%;gap:var(--dntn-space)}

/* The amount step is three separate decisions — how often, how much, and
   whether to cover the fee. Stacking them flush made them read as one jumbled
   block, so each gets its own labelled band with real space between. */
.dntn-amount{display:flex;flex-direction:column;gap:calc(var(--dntn-space)*3.5)}

/* Frequency is a two-way switch, so it reads better as one segmented control
   than as two loose chips that look identical to the amounts below it. */
.dntn-frequency{display:inline-flex;align-self:flex-start;padding:4px;gap:4px;
	background:var(--dntn-bg-alt);border-radius:calc(var(--dntn-radius) + 4px)}
.dntn-frequency .dntn-chip{border:0;background:transparent;min-width:130px;
	border-radius:var(--dntn-radius)}
.dntn-frequency .dntn-chip[aria-pressed=true]{background:var(--dntn-accent);
	color:var(--dntn-on-accent);box-shadow:0 1px 3px rgba(0,0,0,.18)}

.dntn-amount .dntn-chips .dntn-chip{min-width:112px}
.dntn-amount .dntn-field--custom-amount{margin-bottom:0;max-width:320px}

/* The running total is the number the donor is deciding on: give it room and
   set it apart from the presets above it. */
.dntn-amount-display{margin:0;padding:calc(var(--dntn-space)*2) 0 0;
	border-top:1px solid var(--dntn-border)}
.dntn-amount-display:empty{display:none}
.dntn-amount .dntn-check{margin-bottom:0}

.dntn-amount-display{font-size:var(--dntn-fs-2xl);font-weight:700}

/* Numbered circles joined by a rule, with the step name underneath. The
   connector is drawn by each step's ::before so it always spans exactly the gap
   between two dots, however many steps there are. */
.dntn-progress{display:flex;align-items:flex-start;max-width:100%;
	margin:0 auto calc(var(--dntn-space)*5);padding:0 calc(var(--dntn-space)*2)}
.dntn-progress__step{position:relative;flex:1 1 0;min-width:0;
	display:flex;flex-direction:column;align-items:center;text-align:center;
	gap:calc(var(--dntn-space)*1.25);
	font-size:var(--dntn-fs-sm);color:var(--dntn-text-muted)}
.dntn-progress__step::before{content:"";position:absolute;top:21px;height:2px;
	right:50%;left:-50%;background:var(--dntn-border);z-index:0}
.dntn-progress__step:first-child::before{display:none}
.dntn-progress__step.is-done::before,
.dntn-progress__step.is-active::before{background:var(--dntn-accent)}
.dntn-progress__label{min-width:0;overflow-wrap:break-word;max-width:14ch;line-height:1.3}
.dntn-progress__dot{position:relative;z-index:1;flex:0 0 auto;
	width:44px;height:44px;border-radius:50%;background:var(--dntn-bg);
	display:inline-flex;align-items:center;justify-content:center;
	border:2px solid var(--dntn-border);font-size:var(--dntn-fs-base);font-weight:700}
.dntn-progress__step.is-active .dntn-progress__dot{
	background:var(--dntn-accent);border-color:var(--dntn-accent);color:var(--dntn-on-accent);
	box-shadow:0 0 0 6px var(--dntn-ring-soft)}
.dntn-progress__step.is-active{color:var(--dntn-primary);font-weight:700}
.dntn-progress__step.is-done .dntn-progress__dot{
	border-color:var(--dntn-accent);color:var(--dntn-accent)}

.dntn-field{margin-bottom:calc(var(--dntn-space)*2)}
.dntn-error{color:var(--dntn-error);font-size:var(--dntn-fs-sm);margin-top:4px}
.dntn-form .dntn-invalid{border-color:var(--dntn-error);box-shadow:0 0 0 3px rgba(179,38,30,.15)}
.dntn-panel{background:var(--dntn-bg-alt);border-radius:var(--dntn-radius);
	padding:calc(var(--dntn-space)*2)}
.dntn-req{color:var(--dntn-error)}
.dntn-help{margin:4px 0 0}
.dntn-help--block{grid-column:1/-1;margin:0 0 var(--dntn-space)}

/* Field widths compose in a grid, so half/third sit side by side exactly as
   they were arranged in the builder. */
.dntn-fields--grid{display:grid;gap:0 calc(var(--dntn-space)*2);
	grid-template-columns:repeat(2,minmax(0,1fr))}
.dntn-fields--grid .dntn-field--full{grid-column:1/-1}
.dntn-fields--grid .dntn-field--half{grid-column:span 1}
.dntn-fields--grid .dntn-field--third{grid-column:span 1}

.dntn-step__title{margin-bottom:0;padding-bottom:calc(var(--dntn-space)*2);
	border-bottom:1px solid var(--dntn-border)}
.dntn-step__subtitle{color:var(--dntn-text-muted);
	margin:calc(var(--dntn-space)*2) 0 calc(var(--dntn-space)*3)}
.dntn-step__title + .dntn-fields,
.dntn-step__title + .dntn-grid,
.dntn-step__title + .dntn-chips{margin-top:calc(var(--dntn-space)*3)}
.dntn-step__nav{display:flex;gap:var(--dntn-space);flex-wrap:wrap;
	margin-top:calc(var(--dntn-space)*3)}
.dntn-btn--lg{min-height:calc(var(--dntn-input-height)*1.15);
	padding:0 calc(var(--dntn-space)*4);font-size:var(--dntn-fs-lg)}

.dntn-check{display:flex;align-items:flex-start;gap:calc(var(--dntn-space)*1.25);
	font-weight:400;font-size:var(--dntn-fs-base);color:var(--dntn-text);
	margin-bottom:var(--dntn-space);cursor:pointer;line-height:1.4}
.dntn-check input{margin-top:3px;flex:0 0 auto;width:18px;height:18px;
	accent-color:var(--dntn-accent)}
.dntn-choices{display:flex;flex-direction:column;gap:calc(var(--dntn-space)*.5)}

.dntn-summary__list{margin:0 0 calc(var(--dntn-space)*2);padding:calc(var(--dntn-space)*2);
	background:var(--dntn-bg-alt);border-radius:var(--dntn-radius)}
.dntn-summary__row{display:flex;justify-content:space-between;gap:var(--dntn-space);
	padding:calc(var(--dntn-space)*.5) 0;border-bottom:1px solid var(--dntn-border)}
.dntn-summary__row:last-child{border-bottom:0;font-weight:700}
.dntn-summary__row dt{color:var(--dntn-text-muted);margin:0}
.dntn-summary__row dd{margin:0;text-align:right}

.dntn-card__media img{width:100%;height:auto;display:block;
	border-radius:calc(var(--dntn-radius) - 2px)}

/* Honeypot: off-screen rather than display:none, because some bots skip
   hidden inputs but happily fill positioned ones. */
.dntn-hp{position:absolute!important;left:-9999px!important;top:auto;
	width:1px;height:1px;overflow:hidden}

@media (max-width:600px){
	.dntn-fields--grid{grid-template-columns:1fr}
	.dntn-step__nav .dntn-btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.dntn-form *{transition:none!important;animation:none!important}}

@media (max-width:900px){
	.dntn-grid{grid-template-columns:repeat(var(--dntn-cols-tablet),minmax(0,1fr))}
}
@media (max-width:600px){
	.dntn-grid{grid-template-columns:repeat(var(--dntn-cols-mobile),minmax(0,1fr))}
	.dntn-chips .dntn-chip{flex:1 1 calc(50% - var(--dntn-space))}

	/* Five labelled circles never fit a phone. Drop the labels and shrink the
	   dots so the row still reads as progress. */
	.dntn-progress{padding:0;margin-bottom:calc(var(--dntn-space)*3)}
	.dntn-progress__label{display:none}
	.dntn-progress__dot{width:32px;height:32px;font-size:var(--dntn-fs-sm)}
	.dntn-progress__step::before{top:15px}
	.dntn-form--card{padding:calc(var(--dntn-space)*3) calc(var(--dntn-space)*2.5);
		border-radius:calc(var(--dntn-form-radius) * .66)}
	.dntn-form__badge{width:60px;height:60px}
}