/* Legba Donate — public styles. */
.legbdo-wrap {
	--legbdo-color: #0f766e;
	--legbdo-radius: 8px;
	--legbdo-ink: #1c1917;
	--legbdo-muted: #6b6560;
	--legbdo-line: #d9d4cc;
	--legbdo-soft: #f6f4f0;
	--legbdo-paper: #fff;
	--legbdo-danger: #b42318;
	box-sizing: border-box;
	max-width: 620px;
	color: var(--legbdo-ink);
	font-size: 1rem;
	line-height: 1.5;
}
.legbdo-wrap *,
.legbdo-wrap *::before,
.legbdo-wrap *::after { box-sizing: border-box; }
.legbdo-wrap [hidden] { display: none !important; }
.legbdo-title { margin: 0 0 .6em; font-size: 1.35em; line-height: 1.25; }

/* Progress */
.legbdo-progress { margin: 0 0 1.25em; }
.legbdo-bar { height: 12px; border-radius: 999px; background: var(--legbdo-soft); overflow: hidden; box-shadow: inset 0 0 0 1px var(--legbdo-line); }
.legbdo-bar span { display: block; height: 100%; min-width: 4px; border-radius: 999px; background: var(--legbdo-color); transition: width .6s ease; }
.legbdo-facts { display: flex; flex-wrap: wrap; gap: .35em 1.4em; margin-top: .6em; color: var(--legbdo-muted); font-size: .92em; }
.legbdo-fact strong { color: var(--legbdo-ink); font-size: 1.12em; font-variant-numeric: tabular-nums; }
.legbdo-raised strong { font-size: 1.45em; color: var(--legbdo-color); }

/* Form */
.legbdo-form { margin: 0; padding: 1.35em; border: 1px solid var(--legbdo-line); border-radius: calc(var(--legbdo-radius) + 4px); background: var(--legbdo-paper); }
.legbdo-form fieldset { margin: 0 0 1.35em; padding: 0; border: 0; min-width: 0; }
.legbdo-form legend { padding: 0; margin: 0 0 .7em; font-size: .78em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--legbdo-muted); }
.legbdo-form p { margin: 0 0 .9em; }
.legbdo-form label { display: block; margin: 0 0 .25em; font-size: .92em; font-weight: 600; }
.legbdo-form input[type="text"],
.legbdo-form input[type="email"],
.legbdo-form input[type="tel"],
.legbdo-form select,
.legbdo-form textarea {
	display: block; width: 100%; margin: 0; padding: .6em .75em;
	border: 1px solid var(--legbdo-line); border-radius: var(--legbdo-radius);
	background: var(--legbdo-paper); color: var(--legbdo-ink); font: inherit; line-height: 1.4;
}
.legbdo-form input:focus-visible,
.legbdo-form select:focus-visible,
.legbdo-form textarea:focus-visible,
.legbdo-button:focus-visible,
.legbdo-amount input:focus-visible + span,
.legbdo-method input:focus-visible + span { outline: 2px solid var(--legbdo-color); outline-offset: 2px; }
.legbdo-opt { font-weight: 400; color: var(--legbdo-muted); }
.legbdo-req { color: var(--legbdo-danger); }
.legbdo-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.legbdo-test { padding: .5em .8em; border-radius: var(--legbdo-radius); background: #fff7e0; color: #7a5200; font-size: .88em; }
.legbdo-message { color: var(--legbdo-danger); font-weight: 600; }
.legbdo-message:empty { display: none; }
.legbdo-error { display: block; color: var(--legbdo-danger); font-size: .86em; }
.legbdo-error:empty { display: none; }
.legbdo-field.has-error input,
.legbdo-field.has-error select,
.legbdo-field.has-error textarea,
.legbdo-field.has-error .legbdo-amount span { border-color: var(--legbdo-danger); }

/* Amounts */
.legbdo-amounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .55em; }
.legbdo-form .legbdo-amount { position: relative; margin: 0; font-weight: 700; cursor: pointer; }
.legbdo-amount input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.legbdo-amount span {
	display: flex; align-items: center; justify-content: center; min-height: 3em; padding: .4em .5em;
	border: 1.5px solid var(--legbdo-line); border-radius: var(--legbdo-radius); background: var(--legbdo-paper);
	font-size: 1.08em; font-variant-numeric: tabular-nums; text-align: center; transition: border-color .15s, background .15s, color .15s;
}
.legbdo-amount:hover span { border-color: var(--legbdo-color); }
.legbdo-amount input:checked + span { border-color: var(--legbdo-color); background: var(--legbdo-color); color: #fff; }
.legbdo-custom { margin-top: .8em; }
.legbdo-money { position: relative; display: block; max-width: 14em; }
.legbdo-form .legbdo-money input { font-size: 1.15em; font-weight: 700; font-variant-numeric: tabular-nums; }
.legbdo-money-before input { padding-left: 2.6em !important; }
.legbdo-money-after input { padding-right: 2.6em !important; }
.legbdo-symbol { position: absolute; top: 50%; transform: translateY(-50%); color: var(--legbdo-muted); font-weight: 700; pointer-events: none; }
.legbdo-money-before .legbdo-symbol { left: .8em; }
.legbdo-money-after .legbdo-symbol { right: .8em; }
.legbdo-hint { display: block; margin-top: .25em; color: var(--legbdo-muted); font-size: .84em; }
.legbdo-impact { margin: .7em 0 0 !important; padding: .55em .8em; border-left: 3px solid var(--legbdo-color); background: var(--legbdo-soft); font-size: .93em; }
.legbdo-impact:empty { display: none; }

/* Details */
.legbdo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .9em; }
.legbdo-grid > .legbdo-field { grid-column: 1 / -1; }
.legbdo-grid > .legbdo-half { grid-column: auto; }
.legbdo-dedication { margin-bottom: .9em; }
.legbdo-ded-name { margin-top: .6em; }
.legbdo-form .legbdo-check-row label { display: flex; gap: .55em; align-items: flex-start; font-weight: 400; cursor: pointer; }
.legbdo-check-row input { margin: .28em 0 0; flex: none; accent-color: var(--legbdo-color); }

/* Payment */
.legbdo-methods { display: grid; gap: .45em; margin-bottom: .9em; }
.legbdo-form .legbdo-method { position: relative; margin: 0; font-weight: 600; cursor: pointer; }
.legbdo-method input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.legbdo-method span { display: block; padding: .65em .9em .65em 2.5em; border: 1.5px solid var(--legbdo-line); border-radius: var(--legbdo-radius); position: relative; }
.legbdo-method span::before { content: ""; position: absolute; left: .85em; top: 50%; width: 1em; height: 1em; margin-top: -.5em; border: 1.5px solid var(--legbdo-line); border-radius: 50%; background: var(--legbdo-paper); }
.legbdo-method input:checked + span { border-color: var(--legbdo-color); }
.legbdo-method input:checked + span::before { border-color: var(--legbdo-color); box-shadow: inset 0 0 0 3px var(--legbdo-paper); background: var(--legbdo-color); }
.legbdo-method-one { color: var(--legbdo-muted); font-size: .92em; }
.legbdo-submit { margin: 1.1em 0 .5em !important; }
.legbdo-button {
	display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 3.1em; padding: .7em 1.4em;
	border: 0; border-radius: var(--legbdo-radius); background: var(--legbdo-color); color: #fff !important;
	font: inherit; font-size: 1.08em; font-weight: 700; text-decoration: none !important; cursor: pointer; transition: filter .15s;
}
.legbdo-button:hover { filter: brightness(.92); }
.legbdo-button:disabled { opacity: .65; cursor: progress; }
.legbdo-secure { margin: 0 !important; color: var(--legbdo-muted); font-size: .82em; text-align: center; }
.legbdo-step-payment { margin-bottom: 0 !important; }

/* Messages */
.legbdo-closed,
.legbdo-empty { padding: 1em 1.2em; border-radius: var(--legbdo-radius); background: var(--legbdo-soft); }
.legbdo-admin-note { padding: .6em .9em; border: 1px dashed #b42318; color: #b42318; font-size: .9em; }
.legbdo-thanks { padding: 1.5em; border: 1px solid var(--legbdo-line); border-radius: calc(var(--legbdo-radius) + 4px); background: var(--legbdo-paper); scroll-margin-top: 90px; }
.legbdo-thanks h3 { margin: 0 0 .4em; font-size: 1.4em; }
.legbdo-check { display: flex; align-items: center; justify-content: center; width: 2.6em; height: 2.6em; margin-bottom: .7em; border-radius: 50%; background: var(--legbdo-color); color: #fff; font-size: 1.2em; font-weight: 700; }
.legbdo-thanks-text { margin: 0 0 1em; }
.legbdo-summary { margin: 0 0 1em; border-top: 1px solid var(--legbdo-line); }
.legbdo-summary > div { display: flex; justify-content: space-between; gap: 1em; padding: .5em 0; border-bottom: 1px solid var(--legbdo-line); }
.legbdo-summary dt { margin: 0; color: var(--legbdo-muted); }
.legbdo-summary dd { margin: 0; font-weight: 600; text-align: right; }
.legbdo-note { margin: 0; color: var(--legbdo-muted); font-size: .9em; }

/* Donor wall */
.legbdo-wall-list { margin: 0; padding: 0; list-style: none; }
.legbdo-wall-list li { display: flex; align-items: center; gap: .8em; margin: 0; padding: .7em 0; border-bottom: 1px solid var(--legbdo-line); }
.legbdo-avatar { display: flex; align-items: center; justify-content: center; flex: none; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--legbdo-soft); color: var(--legbdo-color); font-weight: 700; }
.legbdo-wall-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.legbdo-wall-ded,
.legbdo-wall-when { color: var(--legbdo-muted); font-size: .86em; }
.legbdo-wall-amount { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Campaign cards */
.legbdo-cards { max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.4em; }
.legbdo-card { display: flex; flex-direction: column; border: 1px solid var(--legbdo-line); border-radius: calc(var(--legbdo-radius) + 4px); background: var(--legbdo-paper); overflow: hidden; }
.legbdo-card-image img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
.legbdo-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.1em 1.2em 1.2em; }
.legbdo-card-body h3 { margin: 0 0 .4em; font-size: 1.15em; line-height: 1.3; }
.legbdo-card-body h3 a { color: inherit; text-decoration: none; }
.legbdo-card-body > p { margin: 0 0 .9em; color: var(--legbdo-muted); font-size: .94em; }
.legbdo-card-body > p:last-child { margin: auto 0 0; }
.legbdo-card .legbdo-progress { margin-bottom: 1em; }

@media (max-width: 480px) {
	.legbdo-form { padding: 1em; }
	.legbdo-grid { grid-template-columns: 1fr; }
	.legbdo-grid > .legbdo-half { grid-column: 1 / -1; }
	.legbdo-amounts { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.legbdo-bar span, .legbdo-amount span, .legbdo-button { transition: none; }
}
