/* MAF Experience: DAF page (builds on donate.css) */

.mafdaf-headin { padding-top: 56px; padding-bottom: 48px; }
.mafdn .mafdaf-h1 { max-width: 20ch; text-wrap: balance; }

.mafdaf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 64px; align-items: start; padding-top: 64px; padding-bottom: 88px; }
.mafdaf-copy { min-width: 0; max-width: 62ch; }
.mafdaf-cta { margin: 32px 0 0; }
.mafdn .mafdaf .mafdn-btn { padding: 18px 32px !important; }

.mafdn .mafdaf-help { font-family: var(--maf-bf) !important; font-size: 16px !important; line-height: 1.7 !important; color: var(--muted) !important; margin: 32px 0 0 !important; padding-top: 26px; border-top: 1px solid var(--line); }
.mafdn .mafdaf-help a, .mafdn .mafdaf-help a:hover, .mafdn .mafdaf-help a:focus {
	color: var(--plum) !important; font-weight: 600 !important; font-size: inherit !important; line-height: inherit !important;
	text-transform: none !important; letter-spacing: normal !important; text-decoration: underline !important; text-underline-offset: 3px; transform: none !important; white-space: nowrap;
}

/* Details card */
.mafdaf-card { min-width: 0; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 28px 56px -28px rgba(32,32,42,.3); border-top: 5px solid var(--berry); }
.mafdaf-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 24px; background: var(--wash); border-bottom: 1px solid var(--line); }
.mafdaf-cardtitle { font: 700 12px/1.3 var(--maf-hf); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }

.mafdaf-list { margin: 0 !important; padding: 0 !important; }
.mafdaf-row { padding: 16px 24px 17px; border-bottom: 1px solid var(--line); }
.mafdaf-row:last-child { border-bottom: 0; }
.mafdn .mafdaf-row dt { font: 700 11px/1.3 var(--maf-hf) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--soft) !important; margin: 0 0 6px !important; }
.mafdn .mafdaf-row dd { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 !important; }
.mafdaf-val { font: 600 16px/1.5 var(--maf-bf); color: var(--ink); min-width: 0; overflow-wrap: anywhere; }

.mafdn button.mafdaf-copy, .mafdn button.mafdaf-copyall,
.mafdn button.mafdaf-copy:hover, .mafdn button.mafdaf-copyall:hover,
.mafdn button.mafdaf-copy:focus, .mafdn button.mafdaf-copyall:focus {
	flex: 0 0 auto; appearance: none; background: #fff !important; border: 1px solid #ddd8d5 !important; border-radius: 999px !important;
	padding: 6px 12px !important; margin: 0 !important; min-height: 0 !important; line-height: 1 !important; box-shadow: none !important;
	font: 600 12px/1 var(--maf-bf) !important; letter-spacing: normal !important; text-transform: none !important; color: var(--ink) !important; cursor: pointer; transform: none !important;
}
.mafdn button.mafdaf-copy:hover, .mafdn button.mafdaf-copyall:hover { border-color: var(--ink) !important; }
.mafdn button.mafdaf-copy:focus-visible, .mafdn button.mafdaf-copyall:focus-visible { outline: 2px solid var(--plum) !important; outline-offset: 2px; }
.mafdn button.mafdaf-copy.is-done, .mafdn button.mafdaf-copyall.is-done { background: var(--plum) !important; border-color: var(--plum) !important; color: #fff !important; }

@media (max-width: 960px) {
	.mafdaf-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 40px; padding-bottom: 60px; }
	.mafdaf-copy { max-width: none; }
	.mafdaf-card { max-width: 560px; }
}
@media (max-width: 640px) {
	.mafdaf-headin { padding-top: 36px; padding-bottom: 30px; }
	.mafdn .mafdaf .mafdn-btn { display: block; text-align: center; padding: 18px 20px !important; white-space: normal; line-height: 1.3 !important; }
	.mafdaf-cardhead, .mafdaf-row { padding-left: 18px; padding-right: 18px; }
	.mafdaf-card { border-radius: 14px; }
}

/* ---- DAFpay (Chariot) button ---- */
.mafdaf-chariot { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 52px; }
.mafdaf-chariot chariot-button { display: inline-block; }
.mafdn .mafdaf-chnote { font-family: var(--maf-bf) !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--muted) !important; margin: 0 !important; }
@media (max-width: 640px) { .mafdaf-chariot { align-items: stretch; } .mafdaf-chariot chariot-button { display: block; } }