/*
 * Donate (Prompt 12, RMHN Donate.dc.html). WooCommerce's checkout markup, restyled: one screen, no
 * cart. Loaded only on the Donate and order-received pages.
 */

/* Blocksy lays the WooCommerce checkout out in two columns; this page has its own layout. */
.woocommerce-checkout .rmhn-donate__form,
.rmhn-donate__form {
	display: block;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.rmhn-donate .rmhn-field-error[hidden] {
	display: none !important;
}

.rmhn-donate__section {
	padding-block: 32px;
}

.rmhn-donate__grid {
	display: grid;
	gap: 32px;
	align-items: start;
}

.rmhn-donate h1 {
	margin: 0 0 12px;
}

.rmhn-donate .rmhn-lead {
	margin: 0 0 28px;
}

.rmhn-donate__block {
	margin: 0 0 24px;
	padding: 0;
	border: 0;
}

.rmhn-donate__block legend,
.rmhn-donate__label,
.rmhn-donate__fields label {
	display: block;
	margin-bottom: 8px;
	padding: 0;
	font: 600 16px/1.4 var(--rmhn-font-body);
	color: var(--rmhn-ink);
}

.rmhn-donate__block h2 {
	margin: 0 0 16px;
}

.rmhn-donate__rule {
	height: 1px;
	margin: 28px 0;
	border: 0;
	background: var(--rmhn-border);
}

/* Mobile signpost: Amount → Details → Pay. */
.rmhn-donate__steps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 24px;
	padding: 12px 14px;
	border: 1px solid var(--rmhn-border);
	border-radius: var(--rmhn-radius-callout);
	background: var(--rmhn-white);
	font-size: 15px;
	color: var(--rmhn-muted);
}

.rmhn-donate__steps a {
	color: var(--rmhn-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rmhn-donate__outage,
.rmhn-donate__retired {
	margin-bottom: 24px;
}

/* ---------------------------------------------------------------- currency toggle */
.rmhn-currency {
	display: flex;
	padding: 4px;
	border-radius: var(--rmhn-radius-button);
	background: var(--rmhn-sand);
}

.rmhn-currency__option {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	min-width: 0;
	min-height: 52px;
	padding: 6px 12px;
	text-align: center;
	border-radius: 10px;
	font: 600 17px/1.2 var(--rmhn-font-body);
	color: var(--rmhn-ink);
	cursor: pointer;
}

.rmhn-currency__option input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.rmhn-currency__option:has(input:checked) {
	background: var(--rmhn-red);
	color: var(--rmhn-white);
}

.rmhn-currency__option:has(input:focus-visible) {
	outline: 3px solid var(--rmhn-ink);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- cause */
.rmhn-donate__select {
	width: 100%;
	min-height: 56px;
	padding: 0 16px;
	border: 1px solid var(--rmhn-border);
	border-radius: var(--rmhn-radius-field);
	background-color: var(--rmhn-white);
	font-size: 18px;
}

.rmhn-donate__causes {
	margin-top: 10px;
	color: var(--rmhn-muted);
}

/* ---------------------------------------------------------------- amount tiers */
.rmhn-tiers {
	display: grid;
	gap: 12px;
}

.rmhn-tier {
	position: relative;
	display: block;
	padding: 16px 18px;
	border: 1px solid var(--rmhn-border);
	border-radius: 14px;
	background: var(--rmhn-white);
	cursor: pointer;
}

.rmhn-tier input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.rmhn-tier__amount {
	display: block;
	font: 700 22px/1.2 var(--rmhn-font-heading);
}

.rmhn-tier__label {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	color: var(--rmhn-muted);
}

.rmhn-tier__tick {
	position: absolute;
	top: 18px;
	right: 18px;
	color: var(--rmhn-red);
	opacity: 0;
}

.rmhn-tier:has(input:checked) {
	border: 2px solid var(--rmhn-red);
	padding: 15px 17px;
	background: var(--rmhn-blush);
}

.rmhn-tier:has(input:checked) .rmhn-tier__tick {
	opacity: 1;
}

.rmhn-tier:has(input:focus-visible) {
	outline: 3px solid var(--rmhn-ink);
	outline-offset: 2px;
}

.rmhn-tier--other .rmhn-tier__amount {
	font-size: 20px;
	color: var(--rmhn-red);
}

/* Custom amount with the currency in front. */
.rmhn-amount-input {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--rmhn-border);
	border-radius: var(--rmhn-radius-field);
	background: var(--rmhn-white);
	overflow: hidden;
}

.rmhn-amount-input__prefix {
	display: flex;
	align-items: center;
	padding: 0 16px;
	background: var(--rmhn-sand);
	border-right: 1px solid var(--rmhn-border);
	font: 600 18px/1 var(--rmhn-font-body);
}

.rmhn-amount-input input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 56px;
	padding: 0 16px;
	border: 0;
	background: none;
	font-size: 18px;
}

.rmhn-amount-input:focus-within {
	outline: 3px solid var(--rmhn-ink);
	outline-offset: 2px;
}

.rmhn-donate__custom.is-invalid .rmhn-amount-input {
	border: 2px solid var(--rmhn-error);
}

/* ---------------------------------------------------------------- details */
.rmhn-donate__fields {
	display: grid;
	gap: 16px;
}

.rmhn-donate__fields .form-row {
	margin: 0;
	padding: 0;
}

.rmhn-donate__fields input[type="text"],
.rmhn-donate__fields input[type="email"],
.rmhn-donate__fields input[type="tel"] {
	width: 100%;
	min-height: 56px;
	padding: 0 16px;
	border: 1px solid var(--rmhn-border);
	border-radius: var(--rmhn-radius-field);
	background-color: var(--rmhn-white);
	font-size: 18px;
}

/* Country code beside the phone number. */
.rmhn-donate__fields select {
	width: 100%;
	min-height: 56px;
	padding: 0 16px;
	border: 1px solid var(--rmhn-border);
	border-radius: var(--rmhn-radius-field);
	background-color: var(--rmhn-white);
	font-size: 18px;
}

.rmhn-donate__fields .description,
.rmhn-donate__fields .woocommerce-input-wrapper + .description {
	margin-top: 6px;
	font-size: 15px;
	color: var(--rmhn-muted);
}

.rmhn-donate__fields .required {
	color: var(--rmhn-error);
	text-decoration: none;
}

.rmhn-donate__optins {
	display: grid;
	gap: 14px;
	margin-top: 20px;
	padding: 18px;
	border: 1px solid var(--rmhn-border);
	border-radius: var(--rmhn-radius-callout);
	background: var(--rmhn-white);
}

.rmhn-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
}

.rmhn-checkbox input {
	flex: none;
	width: 24px;
	height: 24px;
	margin: 2px 0 0;
	accent-color: var(--rmhn-red);
}

.rmhn-checkbox__title {
	display: block;
	font-size: 17px;
}

.rmhn-checkbox__note {
	display: block;
	font-size: 15px;
	color: var(--rmhn-muted);
}

/* ---------------------------------------------------------------- payment */
.rmhn-methods {
	display: grid;
	gap: 12px;
}

.rmhn-method {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 18px;
	border: 1px solid var(--rmhn-border);
	border-radius: 14px;
	background: var(--rmhn-white);
	cursor: pointer;
}

.rmhn-method input {
	flex: none;
	width: 24px;
	height: 24px;
	margin: 2px 0 0;
	accent-color: var(--rmhn-red);
}

.rmhn-method__title {
	display: block;
	font: 600 18px/1.3 var(--rmhn-font-heading);
}

.rmhn-method__note {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	color: var(--rmhn-muted);
}

.rmhn-method:has(input:checked) {
	border: 2px solid var(--rmhn-red);
	padding: 15px 17px;
	background: var(--rmhn-blush);
}

.rmhn-method:has(input:focus-visible) {
	outline: 3px solid var(--rmhn-ink);
	outline-offset: 2px;
}

.rmhn-methods__note {
	margin-top: 12px;
	color: var(--rmhn-muted);
}

/* WooCommerce's own payment box stays in the form for the nonce and gateway radios, but out of the
   page and out of the tab order: the method cards above are what a donor uses. */
.rmhn-donate__woo-payment {
	display: none;
}

.rmhn-donate__submit {
	width: 100%;
	margin-top: 24px;
	min-height: 60px;
	font-size: 20px;
}

.rmhn-donate__submit[disabled] {
	opacity: 0.75;
	cursor: progress;
}

.rmhn-donate__trust-line {
	margin: 16px 0 0;
	color: var(--rmhn-muted);
	text-align: center;
}

/* ---------------------------------------------------------------- side panel */
.rmhn-donate__panel-card {
	display: grid;
	gap: 16px;
}

.rmhn-donate__panel-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--rmhn-radius-callout);
}

.rmhn-donate__impact {
	margin: 0;
	font: 400 20px/1.5 var(--rmhn-font-body);
}

.rmhn-donate__panel-card .rmhn-eyebrow {
	margin: 0;
}

.rmhn-donate__secure {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-weight: 600;
}

.rmhn-donate__secure .rmhn-icon {
	color: var(--rmhn-red);
}

.rmhn-donate__logos {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rmhn-donate__logos li {
	padding: 10px 16px;
	border-radius: 10px;
	background: var(--rmhn-sand);
	font-size: 15px;
	color: var(--rmhn-muted);
}

/* WooCommerce's own notices, restyled to the site's voice. */
.rmhn-donate .woocommerce-error,
.rmhn-donate .woocommerce-message,
.rmhn-donate .woocommerce-info {
	margin: 0 0 20px;
	padding: 16px 18px;
	border: 1px solid var(--rmhn-border);
	border-radius: var(--rmhn-radius-callout);
	background: var(--rmhn-white);
	list-style: none;
	font-size: 17px;
}

.rmhn-donate .woocommerce-error {
	border: 2px solid var(--rmhn-error);
	color: var(--rmhn-error);
}

@media (min-width: 690px) {
	.rmhn-tiers {
		grid-template-columns: 1fr 1fr;
	}

	.rmhn-donate__fields {
		grid-template-columns: 1fr 1fr;
	}

	.rmhn-donate__fields .form-row:not(.rmhn-half) {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1000px) {
	/* Blocksy lays the WooCommerce checkout out in two columns; this page has its own layout. */
.woocommerce-checkout .rmhn-donate__form,
.rmhn-donate__form {
	display: block;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.rmhn-donate .rmhn-field-error[hidden] {
	display: none !important;
}

.rmhn-donate__section {
		padding-block: 56px 72px;
	}

	.rmhn-donate__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: 64px;
	}

	.rmhn-donate__panel {
		position: sticky;
		top: 120px;
	}

	.rmhn-donate__panel-card {
		padding: 24px;
	}
}

/* ---------------------------------------------------------------- after a donation (Prompt 13) */
.rmhn-thanks__grid {
	display: grid;
	gap: 32px;
	align-items: start;
}

.rmhn-thanks__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	margin-bottom: 24px;
	border-radius: 50%;
	background: var(--rmhn-blush);
	color: var(--rmhn-red);
}

.rmhn-thanks__icon--waiting {
	background: var(--rmhn-sand);
	color: var(--rmhn-muted);
}

.rmhn-thanks__icon--failed {
	background: var(--rmhn-white);
	border: 2px solid var(--rmhn-error);
	color: var(--rmhn-error);
}

.rmhn-thanks h1 {
	margin: 0 0 16px;
}

.rmhn-thanks .rmhn-lead {
	margin: 0 0 28px;
	max-width: 36em;
}

.rmhn-thanks__summary {
	padding: 24px;
}

.rmhn-thanks__summary dl {
	margin: 0;
}

.rmhn-thanks__summary dl > div {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	align-items: baseline;
	padding: 14px 0;
	border-bottom: 1px solid var(--rmhn-border);
}

.rmhn-thanks__summary dl > div:last-of-type {
	border-bottom: 0;
}

.rmhn-thanks__summary dt {
	margin: 0;
	color: var(--rmhn-muted);
}

.rmhn-thanks__summary dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

.rmhn-thanks__amount {
	font: 700 26px/1.2 var(--rmhn-font-heading);
}

.rmhn-thanks__reference {
	display: flex;
	align-items: center;
	gap: 10px;
}

.rmhn-copy {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--rmhn-border);
	border-radius: 10px;
	background: var(--rmhn-white);
	font: 600 15px/1 var(--rmhn-font-body);
	color: var(--rmhn-ink);
	cursor: pointer;
}

.rmhn-copy:hover {
	border-color: var(--rmhn-ink);
}

.rmhn-copy__done {
	margin: 12px 0 0;
	font-size: 15px;
	color: var(--rmhn-success);
}

.rmhn-thanks__note {
	margin: 20px 0 0;
	padding: 14px 16px;
	border-radius: var(--rmhn-radius-callout);
	background: var(--rmhn-sand);
	font-size: 16px;
}

.rmhn-thanks__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-top: 28px;
}

.rmhn-thanks__side {
	display: grid;
	gap: 20px;
}

.rmhn-share-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.rmhn-share-links a,
.rmhn-share-links .rmhn-copy {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--rmhn-border);
	border-radius: 50%;
	background: var(--rmhn-white);
	color: var(--rmhn-ink);
}

.rmhn-share-links a:hover,
.rmhn-share-links .rmhn-copy:hover {
	border-color: var(--rmhn-ink);
	background: var(--rmhn-ink);
	color: var(--rmhn-white);
}

.rmhn-thanks__share {
	background: var(--rmhn-sand);
	border-color: transparent;
}

.rmhn-thanks__share h2,
.rmhn-thanks__newsletter h2 {
	margin: 0 0 8px;
	font-size: 24px;
}

.rmhn-thanks__share p {
	margin: 0;
	color: var(--rmhn-muted);
}

/* Turnstile shows nothing unless Cloudflare needs to ask something. */
.rmhn-turnstile {
	margin-top: 20px;
}

.rmhn-turnstile:empty {
	display: none;
}

@media (min-width: 1000px) {
	.rmhn-thanks__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: 64px;
	}

	.rmhn-thanks__summary {
		padding: 32px;
	}
}