/**
 * Uptown Contribute — frontend styles.
 *
 * Ported from the design prototype (design/0qccm.html in the pre-monorepo
 * repo): Twenty Thirteen palette, payment-method tiles, monthly checkbox row,
 * orange gradient CTA. Fonts are inherited from the theme — the prototype's
 * Cinzel/Source Sans links were site chrome, not form styling.
 */

.uptown-donate {
	--uptown-cream: #f7f5e7;
	--uptown-ink: #141412;
	--uptown-orange: #e05d22;
	--uptown-orange-deep: #d94412;
	--uptown-orange-soft: #fdf0e9;
	--uptown-purple: #41297a;
	--uptown-border: #e2ddc9;
	--uptown-muted: #6b6757;
	--uptown-faint: #8a8674;

	max-width: 560px;
	margin: 0 auto;
	padding: 20px;
	font: inherit;
	color: var(--uptown-ink);
}

/*
 * Elements the bundle toggles use the `hidden` attribute. Without this, any
 * rule that sets `display` beats the user-agent [hidden] rule and the element
 * stays visible — the processing overlay is `display: flex`, so it would sit
 * over the page permanently.
 */
.uptown-donate [hidden] {
	display: none !important;
}

/*
 * Offstage: rendered, laid out at real width, but not visible on the page.
 * Stripe elements never fire `ready` inside display:none, so the wallet
 * availability probe and the parked card Payment Element live here instead of
 * behind [hidden].
 */
.uptown-donate .donate-offstage {
	position: absolute !important;
	left: -9999px !important;
	top: 0 !important;
	width: 320px !important;
	pointer-events: none !important;
}

/*
 * Intro copy carried over from the old contribution page. The first
 * .donate-section-label below it supplies the gap, so the last paragraph has
 * no bottom margin of its own.
 */
.donate-intro p {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--uptown-ink);
}

.donate-intro p:last-child {
	margin-bottom: 0;
}

.donate-tradition {
	font-style: italic;
	color: var(--uptown-muted);
}

/* --uptown-muted, not --uptown-faint: faint is 3.66:1 at 13px, under AA. */
.donate-tradition-cite {
	font-style: normal;
	font-size: 13px;
	color: var(--uptown-muted);
	white-space: nowrap;
}

/* Section labels ("Choose an amount", "Pay with") */
.donate-section-label {
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--uptown-muted);
	margin: 26px 0 12px;
}

/* Amount selector: presets plus the $-prefixed "Other" input in one row */
.donate-amount-selector {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.donate-amount-btn {
	flex: 1 1 70px;
	padding: 13px 0;
	font: inherit;
	font-weight: 600;
	font-size: 17px;
	color: var(--uptown-ink);
	background: #fff;
	border: 2px solid var(--uptown-border);
	border-radius: 3px;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}

.donate-amount-btn:hover {
	border-color: var(--uptown-orange);
}

.donate-amount-btn.active {
	border-color: var(--uptown-orange);
	background: var(--uptown-orange-soft);
	color: var(--uptown-orange-deep);
}

.donate-amount-other {
	flex: 1.4 1 110px;
	display: flex;
	align-items: center;
	border: 2px solid var(--uptown-border);
	border-radius: 3px;
	background: #fff;
	padding: 0 12px;
	transition: border-color 0.15s, background 0.15s;
}

.donate-amount-other:focus-within,
.donate-amount-other.active {
	border-color: var(--uptown-orange);
	background: var(--uptown-orange-soft);
}

.donate-currency-symbol {
	font-weight: 600;
	font-size: 17px;
	color: var(--uptown-faint);
}

.donate-custom-input {
	width: 100%;
	border: 0;
	outline: 0;
	background: transparent;
	font: inherit;
	font-weight: 600;
	font-size: 17px;
	padding: 12px 4px;
	color: var(--uptown-ink);
	-moz-appearance: textfield;
	appearance: textfield;
}

/*
 * The tile is the control, so the input keeps no border of its own — including
 * while it has focus, which is the only time the theme puts one back.
 * Twenty Thirteen's `input:focus` is (0,1,1) and outranks `.donate-custom-input`
 * at (0,1,0), so typing an amount drew a second box inside the tile's own
 * border. Naming the element and the state takes it to (0,3,1).
 *
 * Focus stays visible: `.donate-amount-other:focus-within` tints and outlines
 * the whole tile, which is the affordance this design wants anyway.
 */
.uptown-donate input.donate-custom-input,
.uptown-donate input.donate-custom-input:focus {
	border: 0;
	outline: 0;
	box-shadow: none;
}

/*
 * The amount is not always the contributor's to choose: the Venmo profile link
 * carries no amount, so its tile locks the row rather than promise one. Hover
 * is neutralized too — a tile that lights up under the pointer but does nothing
 * on click reads as broken rather than disabled.
 *
 * The selection highlight goes with it. The class stays on the button so the
 * amount is still there on the way back to another method, but a row that shows
 * $5 as chosen directly under "you'll enter the amount in Venmo" says two
 * contradictory things at once.
 */
.donate-amounts-disabled .donate-amount-btn,
.donate-amounts-disabled .donate-amount-other {
	opacity: 0.45;
	cursor: not-allowed;
}

.donate-amounts-disabled .donate-amount-btn:hover,
.donate-amounts-disabled .donate-amount-btn.active,
.donate-amounts-disabled .donate-amount-other.active {
	border-color: var(--uptown-border);
	background: #fff;
	color: var(--uptown-ink);
}

.donate-amounts-disabled .donate-custom-input {
	cursor: not-allowed;
}

/* The tile is the control; the native spinner overflows its fixed padding. */
.donate-custom-input::-webkit-outer-spin-button,
.donate-custom-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Monthly checkbox row */
.donate-monthly-row {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-top: 26px;
	padding: 16px 18px;
	border: 2px solid var(--uptown-border);
	border-radius: 3px;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, opacity 0.15s;
	user-select: none;
	-webkit-user-select: none;
}

.donate-monthly-row:hover {
	border-color: var(--uptown-orange);
}

.donate-monthly-row.checked {
	border-color: var(--uptown-orange);
	background: var(--uptown-orange-soft);
}

.donate-monthly-row input {
	width: 22px;
	height: 22px;
	margin: 2px 0 0;
	accent-color: var(--uptown-orange);
	cursor: pointer;
	flex: none;
}

.donate-monthly-row strong {
	font-size: 16px;
}

.donate-monthly-row small {
	display: block;
	color: var(--uptown-muted);
	font-size: 13.5px;
}

.donate-monthly-row--disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.donate-monthly-row--disabled:hover {
	border-color: var(--uptown-border);
}

.donate-monthly-row--disabled input {
	cursor: not-allowed;
}

/* Email + generic fields */
.donate-field {
	margin-top: 16px;
}

.donate-email-input {
	width: 100%;
	padding: 12px;
	font: inherit;
	font-size: 16px;
	border: 2px solid var(--uptown-border);
	border-radius: 3px;
	background: #fff;
	color: var(--uptown-ink);
	box-sizing: border-box;
}

.donate-email-input:focus {
	outline: none;
	border-color: var(--uptown-orange);
}

.donate-email-hint {
	margin: 6px 2px 0;
	font-size: 13px;
	color: var(--uptown-muted);
}

/* Payment-method tiles */
.donate-methods {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

/*
 * Loading skeleton. Hidden by default; an inline script in the template adds
 * .donate-tiles-loading before first paint, and donate.ts removes it once the
 * wallet probe settles. Without JS the class never appears, so the real tiles
 * show immediately. Tile geometry mirrors .donate-method for a shift-free swap.
 */
.donate-methods-skeleton { display: none; }

.donate-tiles-loading .donate-methods { display: none; }
.donate-tiles-loading .donate-methods-skeleton {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.donate-method-skeleton-tile {
	aspect-ratio: 1 / 1;
	border: 2px solid var(--uptown-border);
	border-radius: 6px;
	background: linear-gradient(90deg, #f1efe9 25%, #faf9f5 50%, #f1efe9 75%);
	background-size: 200% 100%;
	animation: uptown-donate-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes uptown-donate-skeleton-shimmer {
	to { background-position: -200% 0; }
}

.donate-method {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: #fff;
	border: 2px solid var(--uptown-border);
	border-radius: 6px;
	cursor: pointer;
	font: inherit;
	padding: 10px;
	transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
}

/*
 * The white background is pinned, not inherited. These are <button>s, and the
 * theme styles `button:hover` with a solid orange fill — which won, leaving a
 * muted grey caption on orange at roughly 1.5:1. Restating white here takes the
 * hover back from the theme.
 *
 * White rather than an orange fill of our own, which would read as the bolder
 * affordance: the tile logos are inline SVGs with brand-mandated fills picked
 * for a white background. On any orange dark enough for white caption text, the
 * PayPal mark falls to 1.02:1 and the Google Pay wordmark to 1.14:1 — a tile
 * that identifies itself worse on hover than off it. Border, lift and shadow
 * carry the state instead, which leaves the caption on white at 5.67:1.
 *
 * The `:not(.selected)` is load-bearing, not belt-and-braces: this selector is
 * (0,3,0) against `.donate-method.selected`'s (0,2,0), so without it the hover
 * would strip the soft tint off the selected tile.
 */
.donate-method:not(.selected):hover {
	background: #fff;
	border-color: var(--uptown-orange-deep);
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(20, 20, 18, 0.08);
}

.donate-method.selected {
	border-color: var(--uptown-orange);
	background: var(--uptown-orange-soft);
}

.donate-method-logo {
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.donate-method-logo svg {
	max-height: 44px;
}

.donate-method-caption {
	font-size: 13px;
	font-weight: 600;
	color: var(--uptown-muted);
}

.donate-method-check {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--uptown-orange);
	color: #fff;
	font-size: 13px;
	line-height: 22px;
	text-align: center;
	opacity: 0;
	transform: scale(0.5);
	transition: opacity 0.15s, transform 0.15s;
}

.donate-method.selected .donate-method-check {
	opacity: 1;
	transform: scale(1);
}

/* Card Payment Element */
.donate-payment-element {
	margin-top: 20px;
}

/* CTA slot — one visible child at a time */
.donate-cta {
	margin-top: 30px;
}

.donate-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 16px;
	font: inherit;
	font-weight: 700;
	font-size: 19px;
	color: #fff;
	text-decoration: none;
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	box-sizing: border-box;
	background: linear-gradient(to bottom, var(--uptown-orange) 0%, var(--uptown-orange-deep) 100%);
}

.donate-btn:hover {
	background: linear-gradient(to bottom, #ed6a31 0%, #e55627 100%);
	color: #fff;
}

.donate-btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

/*
 * The CTA is white-on-orange whether it is a <button> or an <a>, and for the
 * anchors that takes an extra selector to win.
 *
 * Twenty Thirteen styles `.entry-content a` — (0,1,1) — which outranks a bare
 * `.donate-btn` at (0,1,0). The anchor CTAs were rendering in the theme's rust
 * link colour on the orange fill, about 1.9:1: the Cash App link on the
 * contribution form, and the "start again" link on the manage page. Naming the
 * element takes it to (0,2,1) and the colour back. :visited is included because
 * a contributor who has been to the contribute page before would otherwise get
 * a third colour again.
 */
.uptown-donate a.donate-btn,
.uptown-donate a.donate-btn:link,
.uptown-donate a.donate-btn:visited,
.uptown-donate a.donate-btn:hover,
.uptown-donate a.donate-btn:focus,
.uptown-donate a.donate-btn:active {
	color: #fff;
	text-decoration: none;
}

/* Cash App and the Venmo fallback: link-out on mobile, QR on desktop */
.donate-cashapp-qr,
.donate-venmo-qr {
	display: flex;
	justify-content: center;
}

.donate-cashapp-qr svg,
.donate-venmo-qr svg {
	width: 200px;
	height: 200px;
	border: 2px solid var(--uptown-border);
	border-radius: 6px;
}

.donate-cashapp-note,
.donate-venmo-note {
	margin: 10px 2px 0;
	font-size: 13px;
	color: var(--uptown-muted);
	text-align: center;
}

/* Check: no button, just the mailing address in a quiet panel */
.donate-check-panel {
	padding: 16px 18px;
	border: 2px solid var(--uptown-border);
	border-radius: 3px;
	background: #fff;
	text-align: center;
}

.donate-check-panel p {
	margin: 0;
	font-size: 15px;
	color: var(--uptown-ink);
}

.donate-check-panel .donate-check-note {
	margin-top: 10px;
	font-size: 13px;
	color: var(--uptown-muted);
}

/* Notes and fine print */
.donate-recurring-note {
	margin: 10px 2px 0;
	font-size: 13px;
	color: var(--uptown-muted);
	text-align: center;
}

.donate-fine-print {
	margin: 14px 0 0;
	text-align: center;
	font-size: 13px;
	color: var(--uptown-faint);
}

/* Closing copy carried over from the old contribution page. */
.donate-outro {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--uptown-border);
}

.donate-outro p {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--uptown-muted);
}

.donate-outro p:last-child {
	margin-bottom: 0;
}

/* Inline message area */
.donate-message:empty {
	display: none;
}

.donate-message {
	margin-top: 16px;
	padding: 12px 15px;
	border-radius: 3px;
	text-align: center;
}

.donate-message.donate-error {
	background: #fee;
	border: 1px solid #fcc;
	color: #c00;
}

.donate-message.donate-success-inline {
	background: #efe;
	border: 1px solid #cfc;
	color: #060;
}

/* Processing overlay */
.donate-processing {
	position: fixed;
	inset: 0;
	background: rgba(255, 255, 255, 0.95);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

/*
 * One element, no borders: a conic sweep from transparent to orange, masked
 * down to a ring. The tail fading into the background is what makes it read as
 * motion rather than as a rotating segment, and it costs one compositor-only
 * transform per frame.
 */
.donate-spinner {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	/* Flat orange first: an engine without conic-gradient drops the second
	   declaration and spins a solid disc, rather than nothing at all. */
	background: var(--uptown-orange);
	background: conic-gradient(from 0deg, transparent, var(--uptown-orange));
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
	animation: uptown-donate-spin 0.9s linear infinite;
}

@keyframes uptown-donate-spin {
	to { transform: rotate(360deg); }
}

.donate-processing p {
	margin-top: 20px;
	font-size: 16px;
	color: var(--uptown-ink);
}

/* Static error / success / cancel blocks (server-rendered) */
.donate-error {
	background: #fee;
	border: 1px solid #fcc;
	color: #c00;
	padding: 12px 15px;
	border-radius: 3px;
	margin-bottom: 20px;
	text-align: center;
}

.donate-success {
	background: #efe;
	border: 1px solid #cfc;
	color: #060;
	padding: 20px;
	border-radius: 3px;
	text-align: center;
}

.donate-success h3 { margin: 0 0 10px; }

.donate-cancel {
	background: #fff8e6;
	border: 1px solid #ffeaa7;
	color: #856404;
	padding: 20px;
	border-radius: 3px;
	text-align: center;
	margin-bottom: 20px;
}

.donate-cancel h3 { margin: 0 0 10px; }

/* Manage form */
.donate-manage-intro h3 { margin: 0 0 8px; }

/* Matches the .donate-field rhythm, so the button is not flush against the
   email input. Scoped to this button; the donate form's own buttons sit inside
   containers that already space them. */
.donate-manage-submit { margin-top: 16px; }

/*
 * The manage panel: one card per monthly contribution, built by the bundle.
 * Same card treatment as .donate-check-panel, left-aligned because it is a
 * statement of fact with actions under it, not a call to action.
 */
.donate-manage-card {
	padding: 20px 22px;
	border: 2px solid var(--uptown-border);
	border-radius: 6px;
	background: #fff;
}

.donate-manage-card + .donate-manage-card { margin-top: 16px; }

.donate-manage-amount {
	margin: 0 0 10px;
	font-size: 26px;
	line-height: 1.2;
	color: var(--uptown-purple);
}

.donate-manage-meta {
	margin: 0 0 6px;
	font-size: 14.5px;
	color: var(--uptown-muted);
}

/*
 * The card before it has anything to say. The bars are shorter than the text
 * they stand in for — a 17px bar reads as a line of type where a 23px one reads
 * as a block — so each carries a margin that makes up the difference, and the
 * placeholder comes out the same height as the card that replaces it. The
 * arithmetic assumes a typical body line-height; it is close, not exact, and it
 * is one card with two meta lines where a contributor may have neither.
 */
.donate-skeleton-bar {
	border-radius: 3px;
	background: linear-gradient(90deg, var(--uptown-border) 25%, #f2efe2 50%, var(--uptown-border) 75%);
	/* One tile of travel against a two-tile background, so the sweep loops with
	   no seam — which only holds at a constant speed. */
	background-size: 200% 100%;
	animation: uptown-donate-shimmer 1.4s linear infinite;
}

@keyframes uptown-donate-shimmer {
	from { background-position: 150% 0; }
	to { background-position: -50% 0; }
}

.donate-skeleton-amount {
	height: 22px;
	width: 45%;
	margin-bottom: 19px;
}

.donate-skeleton-line {
	height: 17px;
	width: 62%;
	margin-bottom: 12px;
}

/* The last line's margin also absorbs the gap .donate-manage-actions would have
   contributed, which collapses against this one rather than adding to it. */
.donate-skeleton-line-last {
	width: 48%;
	margin-bottom: 24px;
}

/*
 * Two buttons and then one, because that is where the real "change the amount /
 * update payment method / stop my monthly contribution" row wraps inside the
 * container's 560px.
 */
.donate-skeleton-btn { height: 52px; }
.donate-skeleton-btn-narrow { flex: 1 1 40%; }
.donate-skeleton-btn-wide { flex: 1 1 45%; }
.donate-skeleton-btn-full { flex: 1 1 100%; }

/*
 * Announced, never seen. Prefixed rather than reusing the theme-shared
 * .screen-reader-text, because a theme that redefines that class with
 * display:none would take the status message out of the accessibility tree
 * altogether — which is the one thing it exists to be in.
 */
.donate-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.donate-manage-warning {
	margin: 12px 0 0;
	padding: 10px 12px;
	border-radius: 3px;
	background: #fff8e6;
	border: 1px solid #ffeaa7;
	color: #856404;
	font-size: 14.5px;
}

.donate-manage-note {
	margin: 14px 0 0;
	padding: 10px 12px;
	border-radius: 3px;
	background: #efe;
	border: 1px solid #cfc;
	color: #060;
	font-size: 14.5px;
}

.donate-manage-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

/*
 * Secondary actions: the same tile vocabulary as .donate-amount-btn rather than
 * the orange CTA. Three orange buttons in a row would give "stop my monthly
 * contribution" the same weight as "keep it", which is not the balance this
 * page wants.
 */
.donate-btn-secondary {
	flex: 1 1 auto;
	padding: 12px 16px;
	font: inherit;
	font-weight: 600;
	font-size: 15px;
	color: var(--uptown-ink);
	background: #fff;
	border: 2px solid var(--uptown-border);
	border-radius: 3px;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}

.donate-btn-secondary:hover {
	background: #fff;
	border-color: var(--uptown-orange);
	color: var(--uptown-ink);
}

.donate-btn-secondary[disabled] {
	opacity: 0.6;
	cursor: default;
}

.donate-btn-primary {
	border-color: var(--uptown-orange);
	background: var(--uptown-orange-soft);
	color: var(--uptown-orange-deep);
}

/* Stopping is available, not encouraged. */
.donate-btn-quiet { color: var(--uptown-muted); }

.donate-manage-drawer {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--uptown-border);
}

.donate-manage-drawer .donate-manage-meta { margin: 12px 0; }

.donate-manage-drawer .donate-btn-primary { width: 100%; }

.donate-manage-confirm { margin-top: 18px; }

.donate-manage-panel .donate-btn { margin-top: 18px; }

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Waiting still has to look like waiting when motion is unwelcome, so the
 * sweep and the spin both become a slow fade in place — no travel, no rotation.
 */
@media (prefers-reduced-motion: reduce) {
	.donate-spinner {
		background: var(--uptown-orange);
		animation: uptown-donate-pulse 1.8s ease-in-out infinite;
	}

	.donate-skeleton-bar {
		background: var(--uptown-border);
		animation: uptown-donate-pulse 1.8s ease-in-out infinite;
	}

	.donate-method-skeleton-tile {
		background: #f1efe9;
		animation: uptown-donate-pulse 1.8s ease-in-out infinite;
	}
}

/* The trough stops at half rather than at nothing: the ring is the only thing
   moving on that overlay, and it has to stay legible at the bottom of the fade. */
@keyframes uptown-donate-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

@media (max-width: 480px) {
	.uptown-donate { padding: 15px; }
	.donate-methods { grid-template-columns: repeat(2, 1fr); }
	.donate-tiles-loading .donate-methods-skeleton { grid-template-columns: repeat(2, 1fr); }
	.donate-amount-selector { gap: 8px; }
}