/**
 * Acorn Payments — front-end styles.
 *
 * Leans on totaldigital-nextgen theme.json preset custom properties so the block
 * inherits the site's design tokens rather than hardcoding hex/px. Falls back to
 * neutral values if a token is ever absent.
 */

.acorn-pay,
.acorn-ack {
	--acorn-radius: 8px;
	--acorn-border: var(--wp--preset--color--border-subtle, #d7d9e0);
	--acorn-text: var(--wp--preset--color--text-primary, #1a1f36);
	--acorn-muted: var(--wp--preset--color--text-muted, #5b6070);
	--acorn-accent: var(--wp--preset--color--accent-primary, #0b3d91);
	--acorn-error: var(--wp--preset--color--status-error, #b3261e);
	--acorn-success: var(--wp--preset--color--status-success, #1a7f37);
	--acorn-gap: var(--wp--preset--spacing--y-s, 1rem);
	color: var(--acorn-text);
}

/* On the confirm step, JS tags the content before/after the form (intro copy +
   the sections below it) so it drops out of flow + a11y tree. Sidebar, hero and
   site chrome are left visible. */
[data-acorn-hidden] { display: none !important; }

/* Leave room for the sticky site header when we scroll the section into view. */
.acorn-pay { scroll-margin-top: 6rem; }

.acorn-pay__title,
.acorn-ack__title {
	font-size: var(--wp--preset--font-size--h2, 1.75rem);
	margin-block: 0 var(--wp--preset--spacing--y-s, 1rem);
}

.acorn-pay__subtitle {
	font-size: var(--wp--preset--font-size--h4, 1.25rem);
	margin-block: var(--wp--preset--spacing--y-s, 1rem) var(--wp--preset--spacing--y-xs, 0.5rem);
}

.acorn-pay__status {
	margin: 0;
	min-height: 1.25rem;
}
.acorn-pay__status[data-state="error"] { color: var(--acorn-error); }
.acorn-pay__status[data-state="info"] { color: var(--acorn-muted); }

.acorn-pay__fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--y-s, 1rem);
}

.acorn-pay__legend {
	font-weight: 600;
	padding: 0;
	margin-bottom: var(--wp--preset--spacing--y-xs, 0.5rem);
}

.acorn-pay__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--acorn-gap);
}

.acorn-pay__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: var(--wp--preset--spacing--y-xs, 0.5rem);
}
.acorn-pay__field--sm { max-width: 8rem; }

.acorn-pay__field label {
	font-size: var(--wp--preset--font-size--body-sm, 0.875rem);
	font-weight: 600;
}

.acorn-pay__req { color: var(--acorn-error); }

.acorn-pay__field input,
.acorn-pay__field select {
	font: inherit;
	color: inherit;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--acorn-border);
	border-radius: var(--acorn-radius);
	background: var(--wp--preset--color--bg-page, #fff);
	min-height: 44px; /* WCAG 2.5.8 target size */
}

.acorn-pay__field input:focus-visible,
.acorn-pay__field select:focus-visible,
.acorn-pay__btn:focus-visible {
	outline: 3px solid var(--acorn-accent);
	outline-offset: 2px;
}

.acorn-pay__field--check {
	flex-direction: row;
	align-items: center;
	gap: 0.6rem;
}
.acorn-pay__field--check input { min-height: auto; width: 1.15rem; height: 1.15rem; }
.acorn-pay__field--check label { font-weight: 400; }

.acorn-pay__amount-wrap {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.acorn-pay__amount-symbol { font-weight: 600; color: var(--acorn-muted); }
.acorn-pay__field--amount input { max-width: 12rem; }

.acorn-pay__msg {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-sm, 0.875rem);
	min-height: 1rem;
}
.acorn-pay__msg[data-state="error"] { color: var(--acorn-error); }
.acorn-pay__msg[data-state="ok"] { color: var(--acorn-success); }

.acorn-pay__callback {
	border: 1px solid var(--acorn-border);
	border-radius: var(--acorn-radius);
	padding: var(--wp--preset--spacing--y-s, 1rem);
	margin-bottom: var(--wp--preset--spacing--y-s, 1rem);
	background: var(--wp--preset--color--bg-page-alt, #f5f6fa);
}

.acorn-pay__actions {
	display: flex;
	gap: var(--acorn-gap);
	flex-wrap: wrap;
	margin-top: var(--wp--preset--spacing--y-s, 1rem);
}

.acorn-pay__btn {
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	border-radius: var(--acorn-radius);
	padding: 0.75rem 1.5rem;
	min-height: 44px;
	border: 2px solid var(--acorn-accent);
}
.acorn-pay__btn--primary { background: var(--acorn-accent); color: #fff; }
.acorn-pay__btn--ghost { background: transparent; color: var(--acorn-accent); }
.acorn-pay__btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.acorn-pay__summary {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.35rem 1rem;
	margin: 0 0 var(--wp--preset--spacing--y-s, 1rem);
}
.acorn-pay__summary dt { font-weight: 600; color: var(--acorn-muted); }
.acorn-pay__summary dd { margin: 0; }

.acorn-pay__note {
	color: var(--acorn-muted);
	font-size: var(--wp--preset--font-size--body-sm, 0.875rem);
}

/* ---- Acknowledgement ---- */
.acorn-ack__details {
	display: grid;
	gap: 0.35rem 1rem;
	margin: var(--wp--preset--spacing--y-s, 1rem) 0;
	max-width: 34rem;
}
.acorn-ack__row {
	display: grid;
	grid-template-columns: minmax(10rem, auto) 1fr;
	gap: 1rem;
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--acorn-border);
}
.acorn-ack__row dt { font-weight: 600; color: var(--acorn-muted); margin: 0; }
.acorn-ack__row dd { margin: 0; }
.acorn-ack__footer {
	color: var(--acorn-muted);
	font-size: var(--wp--preset--font-size--body-sm, 0.875rem);
	margin-top: var(--wp--preset--spacing--y-s, 1rem);
}
.acorn-ack--success .acorn-ack__title { color: var(--acorn-success); }
.acorn-ack--declined .acorn-ack__title,
.acorn-ack--error .acorn-ack__title { color: var(--acorn-error); }

@media (prefers-reduced-motion: reduce) {
	.acorn-pay *, .acorn-ack * { transition: none !important; animation: none !important; }
}