/*
 * BlueVineyard Donations — public form styles.
 *
 * Two layers:
 *   - Internal primitives (colour ramp, radius, shadow, spacing, type)
 *   - Semantic tokens (--bvd-surface, --bvd-ink, --bvd-accent, …) — the override target
 *
 * All tokens scoped to .bvd-form-wrap / .bvd-form to avoid global leakage.
 * Dark preset opts in via [data-bvd-theme="dark"] on any ancestor.
 */

.bvd-form-wrap,
.bvd-form {
	/* primitives */
	--bvd-c-white: #ffffff;
	--bvd-c-slate-50: #f8fafc;
	--bvd-c-slate-100: #f1f5f9;
	--bvd-c-slate-200: #e2e8f0;
	--bvd-c-slate-300: #cbd5e1;
	--bvd-c-slate-400: #94a3b8;
	--bvd-c-slate-500: #64748b;
	--bvd-c-slate-600: #475569;
	--bvd-c-slate-700: #334155;
	--bvd-c-slate-800: #1e293b;
	--bvd-c-slate-900: #0f172a;
	--bvd-c-slate-950: #020617;
	--bvd-c-emerald-100: #d1fae5;
	--bvd-c-emerald-500: #10b981;
	--bvd-c-emerald-600: #059669;
	--bvd-c-rose-100: #ffe4e6;
	--bvd-c-rose-500: #f43f5e;

	--bvd-radius-sm: 4px;
	--bvd-radius-md: 8px;
	--bvd-radius-lg: 12px;
	--bvd-radius-pill: 999px;
	--bvd-shadow-card: 0 1px 3px rgb(0 0 0 / 0.08);
	--bvd-shadow-raised: 0 4px 12px rgb(0 0 0 / 0.12);

	--bvd-space-1: 4px;
	--bvd-space-2: 8px;
	--bvd-space-3: 12px;
	--bvd-space-4: 16px;
	--bvd-space-5: 20px;
	--bvd-space-6: 24px;
	--bvd-space-7: 28px;
	--bvd-space-8: 48px;

	--bvd-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--bvd-text-xs: 12px;
	--bvd-text-sm: 13px;
	--bvd-text-base: 14px;
	--bvd-text-md: 15px;
	--bvd-text-lg: 22px;
	--bvd-weight-regular: 400;
	--bvd-weight-medium: 500;
	--bvd-weight-semibold: 600;
	--bvd-weight-bold: 700;
	--bvd-transition-base: 120ms ease;

	/* semantic tokens (override surface) */
	--bvd-surface: var(--bvd-c-white);
	--bvd-surface-muted: var(--bvd-c-slate-50);
	--bvd-surface-page: var(--bvd-c-slate-100);

	--bvd-ink: var(--bvd-c-slate-900);
	--bvd-ink-muted: var(--bvd-c-slate-500);
	--bvd-ink-subtle: var(--bvd-c-slate-400);
	--bvd-ink-on-accent: var(--bvd-c-white);
	--bvd-ink-on-surface-muted: var(--bvd-c-slate-700);

	--bvd-border: var(--bvd-c-slate-300);
	--bvd-border-strong: var(--bvd-c-slate-400);
	--bvd-border-selected: var(--bvd-accent);

	--bvd-accent: var(--bvd-c-emerald-500);
	--bvd-accent-hover: var(--bvd-c-emerald-600);
	--bvd-accent-tint: var(--bvd-c-emerald-100);

	--bvd-danger: var(--bvd-c-rose-500);
	--bvd-danger-tint: var(--bvd-c-rose-100);
	--bvd-focus-ring: 0 0 0 3px color-mix(in srgb, var(--bvd-accent) 35%, transparent);

	--bvd-card-radius: var(--bvd-radius-lg);
	--bvd-card-shadow: var(--bvd-shadow-card);
	--bvd-card-padding: var(--bvd-space-7);
	--bvd-card-max-width: 480px;
}

[data-bvd-theme="dark"] .bvd-form-wrap,
[data-bvd-theme="dark"].bvd-form-wrap,
[data-bvd-theme="dark"] .bvd-form {
	--bvd-surface: var(--bvd-c-slate-900);
	--bvd-surface-muted: var(--bvd-c-slate-800);
	--bvd-surface-page: var(--bvd-c-slate-950);
	--bvd-ink: var(--bvd-c-slate-50);
	--bvd-ink-muted: var(--bvd-c-slate-400);
	--bvd-ink-subtle: var(--bvd-c-slate-500);
	--bvd-ink-on-surface-muted: var(--bvd-c-slate-200);
	--bvd-border: var(--bvd-c-slate-700);
	--bvd-border-strong: var(--bvd-c-slate-600);
	--bvd-accent-tint: color-mix(in srgb, var(--bvd-accent) 20%, transparent);
}

/* ---------- Wrapper + card ---------- */

.bvd-form-wrap {
	padding: var(--bvd-space-6);
	font-family: var(--bvd-font-sans);
	color: var(--bvd-ink);
}

.bvd-form {
	box-sizing: border-box;
	background: var(--bvd-surface);
	color: var(--bvd-ink);
	border-radius: var(--bvd-card-radius);
	box-shadow: var(--bvd-card-shadow);
	padding: var(--bvd-card-padding);
	max-width: var(--bvd-card-max-width);
	margin: 0 auto;
	font-family: var(--bvd-font-sans);
	font-size: var(--bvd-text-base);
	line-height: 1.55;
}
.bvd-form * { box-sizing: border-box; }

/* ---------- Header ---------- */

.bvd-form__header { margin-bottom: var(--bvd-space-5); }
.bvd-form__title {
	font-size: var(--bvd-text-lg);
	font-weight: var(--bvd-weight-bold);
	margin: 0 0 var(--bvd-space-1);
	color: var(--bvd-ink);
}
.bvd-form__tagline {
	color: var(--bvd-ink-muted);
	margin: 0;
	font-size: var(--bvd-text-base);
}

/* ---------- Goal bar ---------- */

.bvd-form__goal { margin-bottom: var(--bvd-space-5); }
.bvd-form__goal-label {
	font-size: var(--bvd-text-xs);
	color: var(--bvd-ink-muted);
	margin-bottom: var(--bvd-space-2);
}
.bvd-form__goal-bar {
	height: 8px;
	background: var(--bvd-surface-muted);
	border-radius: var(--bvd-radius-pill);
	overflow: hidden;
}
.bvd-form__goal-fill {
	height: 100%;
	background: var(--bvd-accent);
	transition: width var(--bvd-transition-base);
}

/* ---------- Frequency tabs ---------- */

.bvd-form__freq {
	display: flex;
	gap: var(--bvd-space-1);
	background: var(--bvd-surface-muted);
	padding: var(--bvd-space-1);
	border-radius: var(--bvd-radius-md);
	margin-bottom: var(--bvd-space-5);
}
.bvd-form__freq-tab {
	flex: 1;
	background: transparent;
	border: 0;
	padding: var(--bvd-space-2);
	font: inherit;
	font-size: var(--bvd-text-sm);
	color: var(--bvd-ink-muted);
	border-radius: var(--bvd-radius-sm);
	cursor: pointer;
	transition: background var(--bvd-transition-base), color var(--bvd-transition-base);
}
.bvd-form__freq-tab:hover { color: var(--bvd-ink); }
.bvd-form__freq-tab.is-active {
	background: var(--bvd-surface);
	color: var(--bvd-ink);
	font-weight: var(--bvd-weight-semibold);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
}
.bvd-form__freq-tab:focus-visible { outline: 0; box-shadow: var(--bvd-focus-ring); }

/* ---------- Payment-method selector ---------- */

/* Mirrors the frequency-tabs pattern so the form has one consistent
   segmented-control style for both selectors. */
.bvd-form__pay-method {
	display: flex;
	gap: var(--bvd-space-1);
	background: var(--bvd-surface-muted);
	padding: var(--bvd-space-1);
	border-radius: var(--bvd-radius-md);
	margin-bottom: var(--bvd-space-4);
}
.bvd-form__pay-method-tab {
	flex: 1;
	background: transparent;
	border: 0;
	padding: var(--bvd-space-2);
	font: inherit;
	font-size: var(--bvd-text-sm);
	color: var(--bvd-ink-muted);
	border-radius: var(--bvd-radius-sm);
	cursor: pointer;
	transition: background var(--bvd-transition-base), color var(--bvd-transition-base);
}
.bvd-form__pay-method-tab:hover { color: var(--bvd-ink); }
.bvd-form__pay-method-tab.is-active {
	background: var(--bvd-surface);
	color: var(--bvd-ink);
	font-weight: var(--bvd-weight-semibold);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
}
.bvd-form__pay-method-tab:focus-visible { outline: 0; box-shadow: var(--bvd-focus-ring); }

.bvd-form__pay-panel[hidden] { display: none; }

/* ---------- Direct Deposit panel ---------- */

.bvd-form__direct-deposit {
	background: var(--bvd-surface-muted);
	border: 1px solid var(--bvd-border);
	border-radius: var(--bvd-radius-md);
	padding: var(--bvd-space-4);
}
.bvd-form__direct-deposit-intro {
	margin: 0 0 var(--bvd-space-3);
	font-size: var(--bvd-text-sm);
	color: var(--bvd-ink-on-surface-muted);
}
.bvd-form__direct-deposit-details {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--bvd-space-1) var(--bvd-space-4);
	margin: 0 0 var(--bvd-space-3);
}
.bvd-form__direct-deposit-details dt {
	font-size: var(--bvd-text-xs);
	font-weight: var(--bvd-weight-medium);
	color: var(--bvd-ink-muted);
}
.bvd-form__direct-deposit-details dd {
	margin: 0;
	font-size: var(--bvd-text-sm);
	font-weight: var(--bvd-weight-semibold);
	color: var(--bvd-ink);
	font-variant-numeric: tabular-nums;
}
.bvd-form__direct-deposit-missing {
	color: var(--bvd-danger);
	font-weight: var(--bvd-weight-regular);
	font-style: normal;
}
.bvd-form__direct-deposit-instructions {
	margin: 0;
	padding-top: var(--bvd-space-3);
	border-top: 1px solid var(--bvd-border);
	font-size: var(--bvd-text-xs);
	color: var(--bvd-ink-muted);
}

/* ---------- Sections ---------- */

.bvd-form__section + .bvd-form__section { margin-top: var(--bvd-space-5); }
.bvd-form__section-title {
	font-size: var(--bvd-text-xs);
	font-weight: var(--bvd-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bvd-ink-muted);
	margin: 0 0 var(--bvd-space-2);
}

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

.bvd-field {
	display: block;
	margin-bottom: var(--bvd-space-3);
}
.bvd-field:last-child { margin-bottom: 0; }
.bvd-field__label {
	display: block;
	font-size: var(--bvd-text-xs);
	font-weight: var(--bvd-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bvd-ink-on-surface-muted);
	margin-bottom: var(--bvd-space-1);
}
.bvd-field__input {
	width: 100%;
	padding: var(--bvd-space-3);
	border: 1px solid var(--bvd-border);
	border-radius: var(--bvd-radius-md);
	font: inherit;
	font-size: var(--bvd-text-base);
	background: var(--bvd-surface);
	color: var(--bvd-ink);
	transition: border-color var(--bvd-transition-base), box-shadow var(--bvd-transition-base);
}
.bvd-field__input::placeholder { color: var(--bvd-ink-subtle); }
.bvd-field__input:hover { border-color: var(--bvd-border-strong); }
.bvd-field__input:focus-visible {
	outline: 0;
	border-color: var(--bvd-border-selected);
	box-shadow: var(--bvd-focus-ring);
}
.bvd-field__input--error,
.bvd-field__input[aria-invalid="true"] {
	border-color: var(--bvd-danger);
	background: var(--bvd-danger-tint);
}
.bvd-field__error {
	margin: var(--bvd-space-1) 0 0;
	font-size: var(--bvd-text-xs);
	color: var(--bvd-danger);
	min-height: 1em;
}
.bvd-field__help {
	margin: var(--bvd-space-1) 0 0;
	font-size: var(--bvd-text-xs);
	color: var(--bvd-ink-muted);
}

/* Name row: first + last side-by-side when both present */
.bvd-form__name-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--bvd-space-2);
}
.bvd-form__name-row .bvd-field { margin-bottom: var(--bvd-space-3); }

/* Checkbox fields — inline label */
.bvd-field--checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--bvd-space-2);
	color: var(--bvd-ink);
}
.bvd-field--checkbox input[type="checkbox"] { margin: 2px 0 0; }

/* ---------- Amount chips + custom ---------- */

.bvd-field--amount .bvd-field__label { margin-bottom: var(--bvd-space-2); }
.bvd-amount__chips {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: var(--bvd-space-2);
	margin-bottom: var(--bvd-space-2);
}
.bvd-amount__chip {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: var(--bvd-space-3);
	border: 1px solid var(--bvd-border);
	border-radius: var(--bvd-radius-md);
	background: var(--bvd-surface);
	color: var(--bvd-ink);
	font-weight: var(--bvd-weight-semibold);
	cursor: pointer;
	transition: border-color var(--bvd-transition-base), background var(--bvd-transition-base);
}
.bvd-amount__chip input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.bvd-amount__chip:hover { border-color: var(--bvd-border-strong); }
.bvd-amount__chip:focus-within { border-color: var(--bvd-border-selected); box-shadow: var(--bvd-focus-ring); }
.bvd-amount__chip.is-selected,
.bvd-amount__chip:has(input[type="radio"]:checked) {
	border-color: var(--bvd-border-selected);
	background: var(--bvd-accent-tint);
	color: var(--bvd-accent-hover);
}
.bvd-amount__custom {
	width: 100%;
	padding: var(--bvd-space-3);
	border: 1px solid var(--bvd-border);
	border-radius: var(--bvd-radius-md);
	font: inherit;
	font-size: var(--bvd-text-base);
	background: var(--bvd-surface);
	color: var(--bvd-ink);
}
.bvd-amount__custom:focus-visible {
	outline: 0;
	border-color: var(--bvd-border-selected);
	box-shadow: var(--bvd-focus-ring);
}

/* ---------- Stripe card block ---------- */

/* Hide the Payment section until the Stripe Element actually mounts.
   public-form.js adds .is-payment-ready to the form root after
   paymentEl.mount() succeeds. Without this, donors see an empty
   bordered card on page load. */
.bvd-form__section--payment {
	display: none;
}
.bvd-form.is-payment-ready .bvd-form__section--payment {
	display: block;
}

.bvd-form__stripe {
	padding: var(--bvd-space-3);
	border: 1px solid var(--bvd-border);
	border-radius: var(--bvd-radius-md);
	background: var(--bvd-surface-muted);
	min-height: 44px;
}

/* Legacy selector kept for back-compat during rollout. */
.bvd-stripe-element {
	padding: var(--bvd-space-3);
	border: 1px solid var(--bvd-border);
	border-radius: var(--bvd-radius-md);
}

/* ---------- Fee row ---------- */

.bvd-form__fee {
	display: flex;
	align-items: flex-start;
	gap: var(--bvd-space-2);
	background: var(--bvd-surface-muted);
	padding: var(--bvd-space-3);
	border-radius: var(--bvd-radius-md);
	color: var(--bvd-ink-on-surface-muted);
	font-size: var(--bvd-text-sm);
	margin-top: var(--bvd-space-4);
}
.bvd-form__fee input[type="checkbox"] { margin: 2px 0 0; }

/* ---------- Messages + CTA + footer ---------- */

.bvd-form__messages {
	margin: var(--bvd-space-3) 0 0;
	color: var(--bvd-danger);
	font-size: var(--bvd-text-sm);
	min-height: 1em;
}
.bvd-form__cta,
.bvd-form__submit {
	display: block;
	width: 100%;
	margin-top: var(--bvd-space-4);
	padding: var(--bvd-space-4);
	background: var(--bvd-accent);
	color: var(--bvd-ink-on-accent);
	border: 0;
	border-radius: var(--bvd-radius-md);
	font: inherit;
	font-size: var(--bvd-text-md);
	font-weight: var(--bvd-weight-semibold);
	cursor: pointer;
	transition: background var(--bvd-transition-base);
}
.bvd-form__cta:hover:not(:disabled),
.bvd-form__submit:hover:not(:disabled) { background: var(--bvd-accent-hover); }
.bvd-form__cta:focus-visible,
.bvd-form__submit:focus-visible { outline: 0; box-shadow: var(--bvd-focus-ring); }
.bvd-form__cta:disabled,
.bvd-form__submit:disabled { opacity: 0.6; cursor: not-allowed; }

.bvd-form__secured {
	text-align: center;
	font-size: var(--bvd-text-xs);
	color: var(--bvd-ink-subtle);
	margin-top: var(--bvd-space-3);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.bvd-form__goal-fill,
	.bvd-form__freq-tab,
	.bvd-field__input,
	.bvd-amount__chip,
	.bvd-form__cta,
	.bvd-form__submit { transition: none; }
}

/* Design Settings — site-wide logo above the form title. */
.bvd-form__logo { display: flex; justify-content: center; margin-bottom: var(--bvd-space-4); }
.bvd-form__logo img, .bvd-form__logo-img { max-height: 64px; width: auto; height: auto; display: block; }