/* AONK Donation Form — scoped, RTL-first, theme-agnostic. Compact by design. */

.aonk-df {
	--aonk-fg: #16211c;
	--aonk-muted: #5f6b66;
	--aonk-bg: #ffffff;
	--aonk-field: #ffffff;
	--aonk-field-alt: #f5f8f7;
	--aonk-border: #dde4e1;
	--aonk-border-strong: #b6c2bd;
	--aonk-accent: #0f8a68;
	--aonk-accent-soft: #e8f4f0;
	--aonk-accent-fg: #ffffff;
	--aonk-error: #c0392b;
	--aonk-error-bg: #fdeceb;
	--aonk-success: #0f8a68;
	--aonk-success-bg: #e8f4f0;
	--aonk-radius: 12px;
	--aonk-radius-sm: 9px;
	--aonk-shadow: 0 1px 2px rgba(16, 32, 26, 0.05), 0 14px 34px -16px rgba(16, 32, 26, 0.26);

	box-sizing: border-box;
	max-width: var(--aonk-max-width, 640px);
	margin: 0 auto;
	padding: clamp(0.95rem, 2.6vw, 1.4rem);
	color: var(--aonk-fg);
	background: var(--aonk-bg);
	border-radius: var(--aonk-radius);
	box-shadow: var(--aonk-shadow);
	font-size: 15px;
	line-height: 1.5;
	text-align: right;
}

.aonk-df *,
.aonk-df *::before,
.aonk-df *::after {
	box-sizing: inherit;
}

/*
 * The `hidden` attribute is honoured only by the UA stylesheet, which any author
 * rule setting `display` overrides - themes and page builders routinely do.
 * Re-assert it at author level so the show/hide logic actually works.
 */
.aonk-df [hidden] {
	display: none !important;
}

/*
 * The theme runs jQuery UI selectmenu across every <select>. It builds its widget
 * from the options present at init time - before our async data arrives - then
 * hides the real element with an inline display:none. Keep our native selects
 * visible and suppress the empty replacement. Scoped to this form, so selectmenu
 * elsewhere on the site is untouched. CSS !important also beats the inline style,
 * which makes this immune to whenever the theme happens to initialise.
 */
.aonk-df select.aonk-df__select {
	display: block !important;
}

.aonk-df .ui-selectmenu-button {
	display: none !important;
}

/* ---------- heading ---------- */

.aonk-df__title {
	margin: 0 0 0.25rem;
	font-size: clamp(1.15rem, 2.8vw, 1.32rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--aonk-fg);
}

.aonk-df__title::after {
	content: "";
	display: block;
	width: 2.25rem;
	height: 3px;
	margin-top: 0.45rem;
	border-radius: 3px;
	background: var(--aonk-accent);
}

.aonk-df__form {
	margin-top: 0.95rem;
}

/* ---------- rows & fields ---------- */

.aonk-df__row {
	margin: 0 0 0.75rem;
}

.aonk-df__fieldset {
	border: 0;
	padding: 0;
	margin-inline: 0;
}

.aonk-df__label {
	display: block;
	margin: 0 0 0.25rem;
	font-weight: 600;
	font-size: 0.85rem;
	line-height: 1.35;
	letter-spacing: 0.01em;
	padding: 0;
}

.aonk-df__req {
	color: var(--aonk-error);
	margin-inline-start: 0.15rem;
}

.aonk-df__opt {
	color: var(--aonk-muted);
	font-weight: 400;
	font-size: 0.78rem;
}

.aonk-df__input,
.aonk-df__select {
	display: block;
	width: 100%;
	padding: 0.5rem 0.75rem;
	font: inherit;
	line-height: 1.45;
	color: inherit;
	background: var(--aonk-field);
	border: 1px solid var(--aonk-border);
	border-radius: var(--aonk-radius-sm);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.aonk-df__input::placeholder {
	color: var(--aonk-muted);
	opacity: 0.75;
}

.aonk-df__input:hover,
.aonk-df__select:hover {
	border-color: var(--aonk-border-strong);
}

.aonk-df__input:focus,
.aonk-df__select:focus {
	outline: none;
	border-color: var(--aonk-accent);
	box-shadow: 0 0 0 3px var(--aonk-accent-soft);
}

.aonk-df__btn:focus-visible,
.aonk-df__check input:focus-visible {
	outline: 2px solid var(--aonk-accent);
	outline-offset: 2px;
}

.aonk-df__input[dir="ltr"] {
	text-align: left;
}

.aonk-df__input[aria-invalid="true"],
.aonk-df__select[aria-invalid="true"] {
	border-color: var(--aonk-error);
}

/* Chevron sits on the left in RTL. Inline SVG keeps it crisp at any zoom. */
.aonk-df__select {
	appearance: none;
	-webkit-appearance: none;
	padding-left: 2.25rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6b66' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 0.7rem center;
	background-size: 1rem 1rem;
	cursor: pointer;
}

.aonk-df__select option {
	color: var(--aonk-fg);
	background: var(--aonk-field);
}

/* ---------- hints & errors ---------- */

.aonk-df__hint {
	margin: 0.28rem 0 0;
	font-size: 0.76rem;
	line-height: 1.4;
	color: var(--aonk-muted);
}

.aonk-df__error {
	margin: 0.28rem 0 0;
	font-size: 0.76rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--aonk-error);
}

/* ---------- donation type chips ---------- */

/*
 * Fits as many chips per row as the container allows. The track minimum is sized
 * so a full-width card takes three, narrowing to two and then one as space runs
 * out - no fixed count, no media queries needed.
 */
.aonk-df__checks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: 0.4rem;
	margin-top: 0.4rem;
}

.aonk-df__check {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.42rem 0.5rem;
	border: 1px solid var(--aonk-border);
	border-radius: var(--aonk-radius-sm);
	cursor: pointer;
	font-size: 0.82rem;
	line-height: 1.3;
	background: var(--aonk-field);
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
	user-select: none;
}

.aonk-df__check:hover {
	border-color: var(--aonk-border-strong);
	background: var(--aonk-field-alt);
}

/*
 * `--on` is set from JS; `:has()` covers the same state declaratively. Both are
 * listed so the checked style survives either mechanism.
 */
.aonk-df__check--on,
.aonk-df__check:has(input:checked) {
	border-color: var(--aonk-accent);
	background: var(--aonk-accent-soft);
	box-shadow: inset 0 0 0 1px var(--aonk-accent);
	font-weight: 600;
}

.aonk-df__check input {
	width: 0.95rem;
	height: 0.95rem;
	margin: 0;
	flex: none;
	accent-color: var(--aonk-accent);
	cursor: pointer;
}

.aonk-df__row--check {
	margin-top: 0.9rem;
	margin-bottom: 0.75rem;
}

.aonk-df__row--check .aonk-df__check {
	display: inline-flex;
	font-size: 0.86rem;
	padding: 0.45rem 0.7rem;
}

/* ---------- gift block ---------- */

.aonk-df__gift {
	border: 1px solid var(--aonk-border);
	border-radius: var(--aonk-radius-sm);
	background: var(--aonk-field-alt);
	padding: 0.75rem 0.75rem 0.05rem;
	margin: 0 0 0.75rem;
}

/* ---------- buttons ---------- */

.aonk-df__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	padding: 0.5rem 1rem;
	font: inherit;
	font-weight: 600;
	border-radius: var(--aonk-radius-sm);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.aonk-df__btn--primary {
	background: var(--aonk-accent);
	color: var(--aonk-accent-fg);
	width: 100%;
	padding-block: 0.7rem;
	font-size: 0.97rem;
	box-shadow: 0 6px 16px -9px var(--aonk-accent);
}

.aonk-df__btn--primary:hover:not(:disabled) {
	filter: brightness(1.07);
}

.aonk-df__btn--primary:active:not(:disabled) {
	transform: translateY(1px);
}

.aonk-df__btn--ghost {
	background: var(--aonk-field);
	color: var(--aonk-accent);
	border-color: var(--aonk-border-strong);
	white-space: nowrap;
	font-size: 0.85rem;
}

.aonk-df__btn--ghost:hover {
	background: var(--aonk-accent-soft);
	border-color: var(--aonk-accent);
}

.aonk-df__btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.aonk-df__actions {
	margin-top: 1.05rem;
}

/* ---------- status / alerts ---------- */

.aonk-df__loading {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.9rem 0;
	font-size: 0.88rem;
	color: var(--aonk-muted);
}

.aonk-df__alert {
	padding: 0.85rem;
	border-radius: var(--aonk-radius-sm);
	border: 1px solid transparent;
	font-size: 0.88rem;
}

.aonk-df__alert p {
	margin: 0 0 0.6rem;
}

.aonk-df__alert--error {
	background: var(--aonk-error-bg);
	border-color: var(--aonk-error);
	color: var(--aonk-error);
}

.aonk-df__status {
	margin-top: 0.9rem;
	padding: 0.85rem;
	border-radius: var(--aonk-radius-sm);
	border: 1px solid transparent;
	font-size: 0.9rem;
}

.aonk-df__status p {
	margin: 0.3rem 0 0;
}

.aonk-df__status--success {
	background: var(--aonk-success-bg);
	border-color: var(--aonk-success);
	color: var(--aonk-success);
}

.aonk-df__status--error {
	background: var(--aonk-error-bg);
	border-color: var(--aonk-error);
	color: var(--aonk-error);
}

.aonk-df__reqid {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

/* ---------- spinner ---------- */

.aonk-df__spinner {
	width: 0.95rem;
	height: 0.95rem;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	display: inline-block;
	animation: aonk-df-spin 0.7s linear infinite;
	flex: none;
}

@keyframes aonk-df-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.aonk-df__spinner {
		animation-duration: 2s;
	}

	.aonk-df *,
	.aonk-df *::before,
	.aonk-df *::after {
		transition-duration: 0.01ms !important;
	}
}

/* ---------- honeypot ---------- */

.aonk-df__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- flat variant ---------- */

/* Drops the card treatment for pages that already supply their own container. */
.aonk-df--flat {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
}

/* ---------- dark ---------- */

/*
 * Opt-in only. Following prefers-color-scheme would flip the form dark on a
 * permanently light page, so the dark palette is applied via theme="dark"
 * or theme="auto" on the shortcode.
 */
.aonk-df--dark {
	--aonk-fg: #e9ecea;
	--aonk-muted: #9aa8a2;
	--aonk-bg: #171c1a;
	--aonk-field: #1e2523;
	--aonk-field-alt: #232b28;
	--aonk-border: #364039;
	--aonk-border-strong: #4d5a53;
	--aonk-accent: #2fb489;
	--aonk-accent-soft: #10312a;
	--aonk-accent-fg: #06231a;
	--aonk-error: #ff8f85;
	--aonk-error-bg: #3a1f22;
	--aonk-success: #6fd7ac;
	--aonk-success-bg: #10312a;
	--aonk-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 34px -16px rgba(0, 0, 0, 0.6);
}

.aonk-df--dark .aonk-df__select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa8a2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
	.aonk-df--auto {
		--aonk-fg: #e9ecea;
		--aonk-muted: #9aa8a2;
		--aonk-bg: #171c1a;
		--aonk-field: #1e2523;
		--aonk-field-alt: #232b28;
		--aonk-border: #364039;
		--aonk-border-strong: #4d5a53;
		--aonk-accent: #2fb489;
		--aonk-accent-soft: #10312a;
		--aonk-accent-fg: #06231a;
		--aonk-error: #ff8f85;
		--aonk-error-bg: #3a1f22;
		--aonk-success: #6fd7ac;
		--aonk-success-bg: #10312a;
	}

	.aonk-df--auto .aonk-df__select {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa8a2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	}
}