/* ==========================================================================
   WC Simple Donations — multi-step donation form styles
   All selectors scoped to .wsd- to avoid conflicts.

   Typography and colour are driven by the active theme's theme.json presets
   (WordPress emits these as --wp--preset--* custom properties). Every token
   carries a literal fallback so the form still looks deliberate if the theme
   changes, or if the plugin is used on a site without those presets.
   ========================================================================== */

.wsd-donation-form {
	/* Type */
	--wsd-font: var(--wp--preset--font-family--funnel-sans, 'Funnel Sans', sans-serif);
	--wsd-size-sm: var(--wp--preset--font-size--small, 0.75rem);
	--wsd-size-md: var(--wp--preset--font-size--medium, 1rem);
	--wsd-size-lg: var(--wp--preset--font-size--large, 1.25rem);

	/* Colour */
	--wsd-fg: var(--wp--preset--color--black, #2B2727);
	--wsd-bg: var(--wp--preset--color--white, #FDFDFD);
	--wsd-accent: var(--wp--preset--color--blue, #5565EA);
	--wsd-tint: var(--wp--preset--color--softer-blue, #ECEEFB);
	--wsd-danger: var(--wp--preset--color--red, #FF0000);

	/* Derived from the black token — the theme has no grey text preset, so
	   these mirror its .opacity-70 convention rather than inventing colours. */
	--wsd-muted: rgba(43, 39, 39, 0.7);
	--wsd-faint: rgba(43, 39, 39, 0.45);
	--wsd-border: rgba(43, 39, 39, 0.25);

	/* Theme uses 1px borders and a 5px radius on its button-like elements
	   (see .border-radius-5 in utility.css, wp-block-file__button in
	   bits-and-pieces.css). */
	--wsd-radius: 5px;

	max-width: 480px;
	font-family: var(--wsd-font);
	color: var(--wsd-fg);
}

/* Form controls do not inherit font-family from an ancestor. The theme's
   normalize.css resets <button> but not <input> or <select>, so without this
   the billing fields and the custom-amount input render in the browser's
   default face instead of Funnel Sans. */
.wsd-donation-form input,
.wsd-donation-form select,
.wsd-donation-form textarea,
.wsd-donation-form button {
	font-family: var(--wsd-font);
}

/* Funnel Sans ships 300/400/700 only. Anything else is synthesised by the
   browser, so weights below are limited to those three. */

/* --------------------------------------------------------------------------
   Progress indicators
   -------------------------------------------------------------------------- */
.wsd-steps {
	display: flex;
	gap: 0.25rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--wsd-border);
	padding-bottom: 0.75rem;
}

.wsd-step-indicator {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	flex: 1;
	font-size: var(--wsd-size-sm);
	font-weight: 400;
	color: var(--wsd-faint);
	transition: color 0.2s ease;
}

.wsd-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.375rem;
	height: 1.375rem;
	border-radius: 50%;
	border: 1px solid var(--wsd-border);
	font-size: var(--wsd-size-sm);
	font-weight: 700;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.wsd-step-indicator--active {
	color: var(--wsd-fg);
}

.wsd-step-indicator--active .wsd-step-number {
	border-color: var(--wsd-fg);
	background-color: var(--wsd-fg);
	color: var(--wsd-bg);
}

.wsd-step-indicator--done {
	color: var(--wsd-fg);
}

.wsd-step-indicator--done .wsd-step-number {
	border-color: var(--wsd-fg);
	background-color: var(--wsd-fg);
	color: var(--wsd-bg);
}

/* --------------------------------------------------------------------------
   Step visibility
   -------------------------------------------------------------------------- */
.wsd-step {
	display: none;
}

.wsd-step--active {
	display: block;
}

/* --------------------------------------------------------------------------
   Step summary line (shown on steps 2 and 3)
   -------------------------------------------------------------------------- */
.wsd-step-summary {
	font-size: var(--wsd-size-md);
	margin-bottom: 1.25rem;
	color: var(--wsd-muted);
}

/* --------------------------------------------------------------------------
   Section labels
   -------------------------------------------------------------------------- */
.wsd-section-label {
	font-size: var(--wsd-size-md);
	font-weight: 700;
	margin-bottom: 0.625rem;
}

/* --------------------------------------------------------------------------
   Cover-the-fees row
   -------------------------------------------------------------------------- */
.wsd-cover-fees {
	margin: 0.25rem 0 1.25rem;
	padding: 0.75rem 0.875rem;
	border: 1px solid var(--wsd-border);
	border-radius: var(--wsd-radius);
	background: var(--wsd-tint);
}

.wsd-cover-fees__label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	cursor: pointer;
	font-size: var(--wsd-size-md);
	line-height: 1.35;
}

.wsd-cover-fees__input {
	margin-top: 0.2rem;
	flex-shrink: 0;
	accent-color: var(--wsd-fg);
}

.wsd-cover-fees__note {
	margin-top: 0.375rem;
	padding-left: 1.5rem;
	font-size: var(--wsd-size-sm);
	color: var(--wsd-muted);
	min-height: 1em;
}

/* --------------------------------------------------------------------------
   Preset amount buttons + inline custom input
   -------------------------------------------------------------------------- */
.wsd-amounts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.wsd-amount-btn {
	padding: 0.5rem 1.125rem;
	border: 1px solid var(--wsd-fg);
	border-radius: var(--wsd-radius);
	background: transparent;
	color: var(--wsd-fg);
	cursor: pointer;
	font-size: var(--wsd-size-md);
	font-weight: 400;
	line-height: 1;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wsd-amount-btn:hover,
.wsd-amount-btn--active {
	background-color: var(--wsd-fg);
	color: var(--wsd-bg);
}

/* Custom amount — inline with preset buttons */
.wsd-custom-amount__inline {
	display: flex;
	align-items: center;
	border: 1px solid var(--wsd-fg);
	border-radius: var(--wsd-radius);
	min-width: 100px;
	max-width: 140px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wsd-custom-amount--active {
	background-color: var(--wsd-fg);
}

.wsd-custom-amount--active .wsd-custom-amount__symbol {
	color: var(--wsd-bg);
}

.wsd-custom-amount--active .wsd-custom-amount__input {
	color: var(--wsd-bg);
	background: transparent;
}

.wsd-custom-amount--active .wsd-custom-amount__input::placeholder {
	color: rgba(253, 253, 253, 0.5);
}

.wsd-custom-amount__symbol {
	padding: 0.5rem 0 0.5rem 0.625rem;
	font-weight: 400;
	font-size: var(--wsd-size-md);
	line-height: 1;
	user-select: none;
	transition: color 0.15s ease;
}

.wsd-custom-amount__input {
	flex: 1;
	border: none;
	outline: none;
	padding: 0.5rem 0.625rem 0.5rem 0.25rem;
	font-size: var(--wsd-size-md);
	font-weight: 400;
	width: 100%;
	background: transparent;
	-moz-appearance: textfield;
	-webkit-appearance: textfield;
	appearance: textfield;
}

.wsd-custom-amount__input::-webkit-outer-spin-button,
.wsd-custom-amount__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Frequency toggle
   -------------------------------------------------------------------------- */
.wsd-frequency {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.wsd-freq-btn {
	flex: 1;
	padding: 0.625rem 1rem;
	border: 1px solid var(--wsd-fg);
	border-radius: var(--wsd-radius);
	background: transparent;
	color: var(--wsd-fg);
	cursor: pointer;
	font-size: var(--wsd-size-md);
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wsd-freq-btn--active span,
.wsd-freq-btn--active {
	color: var(--wsd-bg);
	background-color: var(--wsd-fg);
	border-color: var(--wsd-fg);
}

.wsd-freq-btn--monthly:not(.wsd-freq-btn--active) {
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Billing form fields (Step 2)
   -------------------------------------------------------------------------- */
.wsd-billing-fields {
	margin-bottom: 1rem;
}

.wsd-field {
	margin-bottom: 0.75rem;
}

.wsd-field label {
	display: block;
	font-size: var(--wsd-size-sm);
	font-weight: 700;
	margin-bottom: 0.25rem;
	color: var(--wsd-fg);
}

.wsd-field input,
.wsd-field select {
	width: 100%;
	padding: 0.5rem 0.625rem;
	border: 1px solid var(--wsd-border);
	border-radius: var(--wsd-radius);
	font-size: var(--wsd-size-md);
	color: var(--wsd-fg);
	background: var(--wsd-bg);
	transition: border-color 0.15s ease;
	box-sizing: border-box;
}

.wsd-field input:focus,
.wsd-field select:focus {
	border-color: var(--wsd-fg);
}

/* Two-column rows */
.wsd-row {
	display: flex;
	gap: 0.5rem;
}

.wsd-row > .wsd-field {
	flex: 1;
}

/* Three-column row (city, state, zip) */
.wsd-row--three > .wsd-field:first-child {
	flex: 2;
}

.wsd-row--three > .wsd-field:nth-child(2) {
	flex: 1.5;
}

.wsd-row--three > .wsd-field:nth-child(3) {
	flex: 1;
}

/* --------------------------------------------------------------------------
   Focus ring

   The previous rules killed the outline on inputs without replacing it. Use
   the brand blue so keyboard focus is visible and on-palette.
   -------------------------------------------------------------------------- */
.wsd-donation-form :is(input, select, textarea, button, a):focus-visible {
	outline: 2px solid var(--wsd-accent);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Stripe Payment Element container (Step 3)
   -------------------------------------------------------------------------- */
#wsd-stripe-element {
	border: 1px solid var(--wsd-border);
	border-radius: var(--wsd-radius);
	padding: 0.75rem;
	margin-bottom: 1rem;
	min-height: 290px;
	background: var(--wsd-bg);
}

/* --------------------------------------------------------------------------
   Inline error message
   -------------------------------------------------------------------------- */
.wsd-error {
	font-size: var(--wsd-size-sm);
	color: var(--wsd-danger);
	min-height: 0;
	overflow: hidden;
	transition: min-height 0.2s ease;
}

.wsd-error--visible {
	min-height: 1.5em;
	margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------------------
   Buttons

   These carry WooCommerce's `button alt` classes, which would otherwise paint
   them WooCommerce purple (#7f54b3 from .button.alt in woocommerce.css). The
   element-qualified selectors below outrank that rule regardless of which
   stylesheet loads first.
   -------------------------------------------------------------------------- */
.wsd-donation-form button.wsd-continue-btn,
.wsd-donation-form button.wsd-donate-btn {
	display: block;
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wsd-fg);
	border-radius: var(--wsd-radius);
	background-color: var(--wsd-fg);
	color: var(--wsd-bg);
	font-size: var(--wsd-size-md);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.wsd-donation-form button.wsd-continue-btn:hover,
.wsd-donation-form button.wsd-donate-btn:hover {
	background-color: var(--wsd-accent);
	border-color: var(--wsd-accent);
	color: var(--wsd-bg);
}

.wsd-donation-form button.wsd-donate-btn--loading {
	opacity: 0.7;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Back links
   -------------------------------------------------------------------------- */
.wsd-back-link {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: var(--wsd-size-sm);
	color: var(--wsd-muted);
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}

.wsd-back-link:hover {
	color: var(--wsd-fg);
}

/* --------------------------------------------------------------------------
   Success state (Step 4)
   -------------------------------------------------------------------------- */
.wsd-success {
	text-align: center;
	padding: 2rem 0;
}

.wsd-success__message {
	font-size: var(--wsd-size-lg);
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.wsd-success__details {
	font-size: var(--wsd-size-md);
	color: var(--wsd-muted);
}

/* --------------------------------------------------------------------------
   Admin notice

   Rendered *outside* .wsd-donation-form (see render.php, the add-to-cart
   template and the shortcode), so the --wsd-* tokens above are out of scope
   here. Reference the theme presets directly.
   -------------------------------------------------------------------------- */
.wsd-notice {
	border-left: 4px solid var(--wp--preset--color--black, #2B2727);
	background: var(--wp--preset--color--soft-yellow, #FEFFC0);
	color: var(--wp--preset--color--black, #2B2727);
	font-family: var(--wp--preset--font-family--funnel-sans, 'Funnel Sans', sans-serif);
	font-size: var(--wp--preset--font-size--medium, 1rem);
	padding: 0.75rem 1rem;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media ( max-width: 480px ) {
	.wsd-row,
	.wsd-row--three {
		flex-direction: column;
		gap: 0;
	}

	.wsd-row > .wsd-field,
	.wsd-row--three > .wsd-field {
		flex: none;
	}
}