/**
 * ACC checkout form.
 *
 * Uses the theme's preset custom properties where they exist, with fallbacks
 * matching cross-timbers so the form still looks right if this loads somewhere the
 * theme tokens don't reach.
 */

.acc-pay {
	--accpay-ink: #2a2a26;
	--accpay-muted: #6b6b63;
	--accpay-line: #d8d8cf;
	--accpay-green: var(--wp--preset--color--primary, #0d2b12);
	--accpay-danger: #b32d2e;
	--accpay-surface: #ffffff;

	max-width: 34rem;
	margin: 0 auto;
	color: var(--accpay-ink);
	text-align: left;
}

/* --- Test-mode banner ------------------------------------------------- */

.acc-pay__testbadge {
	margin: 0 0 1.25rem;
	padding: 0.6rem 0.9rem;
	background: #fdf0d5;
	border-left: 3px solid #d4a017;
	border-radius: 3px;
	font-size: 0.8125rem;
	color: #7a5901;
}

/* --- Unavailable notice ----------------------------------------------- */

.acc-pay--unavailable p {
	margin: 0;
	padding: 1.25rem;
	background: #f4f4f0;
	border-radius: 6px;
	font-size: 0.95rem;
	line-height: 1.6;
}

/* --- Fields ----------------------------------------------------------- */

.acc-pay__field {
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
}

.acc-pay__label {
	display: block;
	margin: 0 0 0.35rem;
	padding: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--accpay-muted);
}

.acc-pay__opt {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	opacity: 0.75;
}

.acc-pay__hint {
	margin: 0.3rem 0 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--accpay-muted);
}

.acc-pay input[type="text"],
.acc-pay input[type="email"],
.acc-pay input[type="tel"],
.acc-pay input[type="url"],
.acc-pay input[type="number"],
.acc-pay input[type="file"],
.acc-pay select,
.acc-pay textarea {
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--accpay-line);
	border-radius: 4px;
	background: var(--accpay-surface);
	color: var(--accpay-ink);
	font: inherit;
	/* 16px floor: anything smaller makes iOS zoom the page on focus. */
	font-size: 1rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.acc-pay input:focus,
.acc-pay textarea:focus {
	outline: none;
	border-color: var(--accpay-green);
	box-shadow: 0 0 0 3px rgba(13, 43, 18, 0.12);
}

.acc-pay .has-error {
	border-color: var(--accpay-danger);
}

.acc-pay .has-error:focus {
	box-shadow: 0 0 0 3px rgba(179, 45, 46, 0.12);
}

/* --- Paired fields ------------------------------------------------------ */

.acc-pay__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1rem;
}

@media (max-width: 33rem) {
	.acc-pay__row {
		grid-template-columns: 1fr;
	}
}

/* Address shares a row with phone; a tall box would misalign the pair. */
.acc-pay__row textarea {
	min-height: 0;
	resize: vertical;
}

/* --- Tier / amount picker --------------------------------------------- */

.acc-pay__tiers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: 0.5rem;
}

.acc-pay__tier {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--accpay-line);
	border-radius: 5px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.acc-pay__tier:hover {
	border-color: var(--accpay-green);
}

/* Hidden visually, still focusable and announced by a screen reader. */
.acc-pay__tier input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.acc-pay__tier:has(input:checked) {
	border-color: var(--accpay-green);
	background: rgba(13, 43, 18, 0.04);
	box-shadow: inset 0 0 0 1px var(--accpay-green);
}

.acc-pay__tier:has(input:focus-visible) {
	box-shadow: 0 0 0 3px rgba(13, 43, 18, 0.18);
}

.acc-pay__tier-name {
	font-size: 0.875rem;
	font-weight: 600;
}

.acc-pay__tier-price {
	font-size: 0.9375rem;
	color: var(--accpay-muted);
}

.acc-pay__tier:has(input:checked) .acc-pay__tier-price {
	color: var(--accpay-green);
	font-weight: 700;
}

.acc-pay__tiers--amounts .acc-pay__tier {
	align-items: center;
	text-align: center;
}

.acc-pay__fixed {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0 0 1.25rem;
	padding: 0.85rem 1rem;
	background: #f4f4f0;
	border-radius: 5px;
	font-size: 1rem;
}

/* --- Custom amount ----------------------------------------------------- */

.acc-pay__custom {
	margin-top: 0.75rem;
}

.acc-pay__currency {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.acc-pay__currency span {
	font-size: 1.1rem;
	color: var(--accpay-muted);
}

/* --- Radio rows / checkbox --------------------------------------------- */

.acc-pay__choice {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.55rem 0;
	cursor: pointer;
	font-size: 0.9375rem;
	line-height: 1.5;
	min-height: 44px;
}

.acc-pay__choice em {
	color: var(--accpay-muted);
	font-style: normal;
	font-size: 0.875rem;
}

.acc-pay__checkbox {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	cursor: pointer;
	font-size: 0.9375rem;
	/* The whole row is the label, so it is also the tap target. */
	min-height: 44px;
	padding: 0.55rem 0;
}

.acc-pay__choice input,
.acc-pay__checkbox input {
	margin: 0;
	flex: none;
	accent-color: var(--accpay-green);
	width: 1.05rem;
	height: 1.05rem;
}

.acc-pay__choice input {
	margin-top: 0.2rem;
}

/* --- Card fields -------------------------------------------------------- */
/* PayPal mounts an iframe inside each .acc-pay__hosted slot; the box chrome
   lives out here so the inputs match the theme's own fields. */

.acc-pay__cards {
	display: grid;
	gap: 0.6rem;
}

/* Expiry and security code are 5 and 4 characters. Stretched to half the
   dialog each they read as though something is missing from them, so they get
   only the width they need and sit against the left edge under the number. */
.acc-pay__cards-row {
	display: grid;
	grid-template-columns: 8.5rem 7rem;
	gap: 0.6rem;
}

/* 380px sits below the 390/393/414/428px widths most current phones report,
   so the fixed row survived on nearly every phone with dead space beside it. */
@media (max-width: 30rem) {
	.acc-pay__cards-row {
		grid-template-columns: 1fr 1fr;
	}
}

.acc-pay__hosted {
	background: #fff;
	border: 1px solid var(--accpay-border, #d5d0c4);
	border-radius: 4px;
	/* The SDK already insets its input, so keep ours tight - otherwise the two
	   stack up and the scheme mark floats away from the left edge. */
	padding: 0 0.35rem;
	/* Match the ~46px height of the theme's own inputs; the SDK's iframe
	   otherwise auto-grows far taller than the fields above. */
	height: 2.9rem;
	overflow: hidden;
	/* The SDK wraps its iframe in a div it sizes itself - about 33px, snug
	   around the text - and that div would otherwise sit at the top of this
	   46px box, which is what made the text read as too high. Center the
	   SDK's own container rather than trying to stretch it. */
	display: flex;
	align-items: center;
}

/* PayPal's wrapper div around the iframe. It carries an inline height, so
   leave that alone and only make it span the width. */
.acc-pay__hosted > * {
	flex: 1 1 auto;
	min-width: 0;
}

/* Shown only when the checkout renders without PayPal (no credentials): the
   same placeholders the hosted fields carry, so the demo reads correctly. */
.acc-pay__hosted-ph {
	display: flex;
	align-items: center;
	height: 100%;
	font-size: 16px;
	line-height: 1.5;
	color: #8b857a;
}

/* Same focus treatment as the theme's own inputs (see input:focus above). */
.acc-pay__hosted:focus-within {
	border-color: var(--accpay-green);
	box-shadow: 0 0 0 3px rgba(13, 43, 18, 0.12);
}

.acc-pay__hosted iframe {
	display: block;
	width: 100%;
}

/* --- PayPal buttons (ineligibility fallback only) ----------------------- */

.acc-pay__paypal {
	padding: 0.25rem 0;
	min-height: 2.5rem;
	/* The SDK stretches its buttons to the container; don't let them go
	   comically wide on a full-width form. */
	max-width: 420px;
}

/* --- Errors ------------------------------------------------------------ */

.acc-pay__error {
	display: none;
	margin: 0.35rem 0 0;
	font-size: 0.8125rem;
	color: var(--accpay-danger);
}

.acc-pay__error.is-visible {
	display: block;
}

.acc-pay__error--form.is-visible {
	padding: 0.7rem 0.9rem;
	background: #fdeceb;
	border-left: 3px solid var(--accpay-danger);
	border-radius: 3px;
	font-size: 0.875rem;
	line-height: 1.5;
}

/* --- Submit ------------------------------------------------------------ */

.acc-pay__submit {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	margin-top: 0.5rem;
	padding: 0.85rem 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--accpay-green);
	color: #fff;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity 0.15s ease, transform 0.05s ease;
}

.acc-pay__submit:hover:not(:disabled) {
	opacity: 0.92;
}

.acc-pay__submit:active:not(:disabled) {
	transform: translateY(1px);
}

.acc-pay__submit:disabled {
	cursor: progress;
	opacity: 0.85;
}

.acc-pay__spinner {
	width: 1rem;
	height: 1rem;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: acc-pay-spin 0.7s linear infinite;
}

@keyframes acc-pay-spin {
	to { transform: rotate(360deg); }
}

.acc-pay__trust {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	margin: 1rem 0 0;
	padding: 0.75rem 0.9rem;
	background: #f4f4f0;
	border-radius: 5px;
}

.acc-pay__trust-icon {
	flex: none;
	margin-top: 0.15rem;
	color: var(--accpay-green);
}

.acc-pay__trust-copy {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--accpay-muted);
}

.acc-pay__trust-copy strong {
	color: var(--accpay-ink);
}

.acc-pay__trust-copy a {
	color: var(--accpay-green);
}

.acc-pay__element-fallback {
	margin: 0.5rem 0 0;
	padding: 0.7rem 0.9rem;
	background: #fdf0d5;
	border-left: 3px solid #d4a017;
	border-radius: 3px;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: #7a5901;
}

/* --- Success ----------------------------------------------------------- */

.acc-pay__success {
	padding: 2.5rem 1.5rem;
	text-align: center;
}

/* Centered by flex rather than text-align: the theme renders SVGs as blocks,
   which text-align ignores, so the check sat hard left under a centered
   heading. */
.acc-pay__check {
	display: flex;
	justify-content: center;
}

.acc-pay__check-ring,
.acc-pay__check-mark {
	stroke: var(--accpay-green);
}

.acc-pay__check-ring {
	stroke-dasharray: 151;
	stroke-dashoffset: 151;
}

.acc-pay__check-mark {
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
}

.acc-pay__success.is-in .acc-pay__check-ring {
	animation: acc-pay-draw 0.5s ease forwards;
}

.acc-pay__success.is-in .acc-pay__check-mark {
	animation: acc-pay-draw 0.3s ease 0.4s forwards;
}

@keyframes acc-pay-draw {
	to { stroke-dashoffset: 0; }
}

.acc-pay__success-title {
	margin: 1rem 0 0.5rem;
	font-size: 1.5rem;
	color: var(--accpay-green);
}

.acc-pay__success-copy {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--accpay-muted);
}

/* The check draws itself in. For anyone who asked not to see motion, it is
   simply already drawn — the confirmation still lands, just without the show. */
@media (prefers-reduced-motion: reduce) {
	.acc-pay__success.is-in .acc-pay__check-ring,
	.acc-pay__success.is-in .acc-pay__check-mark {
		animation: none;
		stroke-dashoffset: 0;
	}
	.acc-pay__spinner {
		animation-duration: 1.5s;
	}
	.acc-pay__submit:active:not(:disabled) {
		transform: none;
	}
}

/* EIN + charitable status, shown on the donate form so a donor can look the
   council up before giving rather than finding it on the receipt afterwards. */
.acc-pay__ein {
    margin: 1rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--accpay-muted);
}