/**
 * Donation-status block (ADR-0019 D4) — the live raised/goal stack.
 *
 * SEPARATE from donation-form.css on purpose: that file is scoped to the dark blue
 * donation-form panel (light ink); this block lives on the LIGHT right-column
 * surface, a different contrast basis. Soft-surface card, sibling to the
 * bank-instruction block (same palette/radius): the "Adományok" caption above the
 * raised amount as the single hero in brand-blue display, a thin progress bar, and
 * a quiet "Cél: <goal>" foot. No percent figure (D4).
 *
 * Verified to hold at the ~340px right-column width without "Ft"/number overflow.
 */

.charitable-sc-donation-status {
	margin: 0 0 1.25rem;
	padding: 1.25rem 1.4rem;
	background: #f7f9fb;                 /* matches the bank-instruction card */
	border: 1px solid #e2e6ea;
	border-radius: 10px;
	text-align: center;
}

/* "Adományok" — small, muted, tracked caps. */
.charitable-sc-donation-status__label {
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8a96a3;
}

/* The raised amount — the single hero, large brand-blue display type. */
.charitable-sc-donation-status__amount {
	margin: 0;
	font-size: 2.2rem;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #28527A;                      /* brand blue (--pswp-bg) */
	font-variant-numeric: tabular-nums;
	white-space: nowrap;                 /* keep "100 000 Ft" on one line */
}

/* Thin progress bar: accent fill on a light track. Supporting, not the whole block. */
.charitable-sc-donation-status__bar {
	margin: 0.85rem 0 0;
	height: 8px;
	border-radius: 999px;
	background: #e6eaf0;                  /* track */
	overflow: hidden;
}
.charitable-sc-donation-status__bar-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: #8AC4D0;                  /* accent (--pswp-accent) */
	transition: width 0.4s ease;
}

/* Quiet goal foot line — the small reference, never co-equal with the raised hero. */
.charitable-sc-donation-status__goal {
	margin: 0.7rem 0 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: #5a6672;
}

@media (prefers-reduced-motion: reduce) {
	.charitable-sc-donation-status__bar-fill {
		transition: none;
	}
}