/*!
 * Woo Fundraising — frontend single-product section.
 *
 * Inherits the theme's typography, colors, and alignment by default.
 * All colors use CSS custom properties so dark themes can override
 * them with a single :root block.
 *
 * No gradients, no decorative shadows, no bubbly radius.
 */

:root {
	--woofund-border: #dcdcde;
	--woofund-surface: #fff;
	--woofund-surface-alt: #f6f7f7;
	--woofund-text: inherit;
	--woofund-text-muted: inherit;
	--woofund-success: #00a32a;
	--woofund-success-bg: rgba( 0, 163, 42, 0.04 );
	--woofund-primary: #2271b1;
	--woofund-primary-bg: rgba( 34, 113, 177, 0.04 );
	--woofund-bar-track: #dcdcde;
	--woofund-bar-fill: #00a32a;
	--woofund-radio-border: #8c8f94;
	--woofund-radio-checked: #2271b1;
	--woofund-tick: #50575e;
	--woofund-tick-unlocked: #1d2327;
	--woofund-failed-border: #646970;
	--woofund-failed-bg: rgba( 100, 105, 112, 0.06 );
	--woofund-success-bg-strong: rgba( 0, 163, 42, 0.06 );
}

.woofund-campaign {
	margin: 1.5em 0;
}

/* ─── Goal bar + progress ───────────────────────────────── */

.woofund-progress {
	margin: 0 0 1em;
}

.woofund-goal-bar {
	position: relative;
	width: 100%;
	height: 32px;
	background: var( --woofund-bar-track );
	border-radius: 4px;
	overflow: hidden;
}

.woofund-goal-bar__fill {
	height: 100%;
	background: var( --woofund-bar-fill );
	transition: none; /* static render — no animation per design doc */
}

.woofund-progress__numbers {
	margin: 0.5em 0 0;
	font-size: 1em;
	color: inherit;
}

.woofund-progress__first-contribution {
	margin: 0.25em 0 0;
	font-size: 0.9em;
	color: inherit;
	opacity: 0.8;
}

/* ─── Goal bar stretch ticks ───────────────────────────── */

.woofund-goal-tick {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var( --woofund-tick );
	opacity: 0.5;
	z-index: 1;
}

.woofund-goal-tick--unlocked {
	background: var( --woofund-tick-unlocked );
	opacity: 0.8;
}

/* ─── Flexible-mode tier selector ─────────────────────── */

.woofund-flexible-fieldset {
	margin: 0 0 1em;
	padding: 0;
	border: 0;
}

.woofund-flexible-fieldset legend {
	padding: 0;
	margin: 0 0 0.5em;
	font-weight: 600;
}

.woofund-flexible-input {
	position: relative;
	margin: 0 0 1em;
}

.woofund-flexible-input label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.25em;
}

.woofund-flexible-input__prefix {
	position: absolute;
	bottom: 0.6em;
	left: 0.6em;
	font-weight: 600;
	opacity: 0.75;
	pointer-events: none;
}

.woofund-flexible-input input[type="text"] {
	width: 100%;
	min-height: 2.5em;
	padding-left: 2em;
	font-size: 1.1em;
}

.woofund-flexible-tiers {
	margin: 0 0 0.75em;
}

.woofund-flexible-tiers__label {
	margin: 0 0 0.4em;
	font-size: 0.9em;
	font-weight: 600;
	opacity: 0.85;
}

.woofund-flexible-tier-card {
	padding: 0.5em 0.75em;
	margin: 0 0 0.4em;
	border: 1px solid var( --woofund-border );
	border-left: 3px solid var( --woofund-border );
	opacity: 0.6;
	transition: opacity 150ms, border-color 150ms;
}

.woofund-flexible-tier-card.woofund-tier-matched {
	border-left-color: var( --woofund-primary );
	opacity: 1;
	background: var( --woofund-primary-bg );
}

.woofund-flexible-tier-card__name {
	font-weight: 600;
}

.woofund-flexible-tier-card__range {
	font-size: 0.85em;
	opacity: 0.75;
	margin-left: 0.5em;
}

.woofund-flexible-tier-card__desc {
	display: block;
	margin-top: 0.15em;
	font-size: 0.85em;
	opacity: 0.75;
}

.woofund-flexible-matched {
	margin: 0 0 0.75em;
	padding: 0.6em 0.75em;
	border-left: 3px solid var( --woofund-success );
	background: var( --woofund-success-bg );
}

.woofund-flexible-matched__label {
	margin: 0 0 0.2em;
	font-size: 0.85em;
	font-weight: 600;
	color: var( --woofund-success );
}

.woofund-flexible-matched__name {
	margin: 0;
	font-weight: 600;
}

.woofund-flexible-matched__desc {
	margin: 0.15em 0 0;
	font-size: 0.9em;
	opacity: 0.85;
}

/* ─── Stretch goal ladder ──────────────────────────────── */

.woofund-stretch-ladder {
	margin: 0.75em 0 0.5em;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.woofund-stretch-card {
	padding: 0.6em 0.75em;
	border: 1px solid var( --woofund-border );
	border-left: 3px solid var( --woofund-border );
}

.woofund-stretch-card--unlocked {
	border-left-color: var( --woofund-success );
	background: var( --woofund-success-bg );
}

.woofund-stretch-card--pending {
	opacity: 0.7;
}

.woofund-stretch-card__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4em;
}

.woofund-stretch-card__label {
	font-weight: 600;
}

.woofund-stretch-card__threshold {
	font-size: 0.9em;
	color: inherit;
	opacity: 0.75;
}

.woofund-stretch-card__badge {
	font-size: 0.8em;
	font-weight: 600;
	color: var( --woofund-success );
}

.woofund-stretch-card__desc {
	margin: 0.25em 0 0;
	font-size: 0.9em;
	opacity: 0.85;
}

/* ─── Time remaining ────────────────────────────────────── */

.woofund-time {
	margin: 0.5em 0 1em;
	font-size: 0.95em;
	color: inherit;
	opacity: 0.85;
}

/* ─── Terminal banners ──────────────────────────────────── */

.woofund-banner {
	padding: 0.75em 1em;
	margin: 0.5em 0 1em;
	border-left: 3px solid var( --woofund-border );
}

.woofund-banner--succeeded {
	border-left-color: var( --woofund-success );
	background: var( --woofund-success-bg );
}

.woofund-banner--failed {
	border-left-color: var( --woofund-failed-border );
	background: var( --woofund-failed-bg );
}

.woofund-banner p {
	margin: 0;
}

/* ─── Tier selector ─────────────────────────────────────── */

.woofund-tier-selector {
	margin: 0 0 1em;
	padding: 0;
	border: 0;
}

.woofund-tier-selector legend {
	padding: 0;
	margin: 0 0 0.5em;
	font-weight: 600;
}

.woofund-tier-selector__option {
	display: block;
	padding: 0.75em;
	margin: 0 0 0.5em;
	border: 1px solid var( --woofund-border );
	cursor: pointer;
}

.woofund-tier-selector__option:has( input:checked ) {
	border-color: var( --woofund-primary );
	background: var( --woofund-primary-bg );
}

/* Fallback for browsers without :has() — selected state is still
 * communicated via the radio check itself. No extra outline needed
 * to pass WCAG because the native radio focus ring handles it. */

.woofund-tier-selector__option input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border: 2px solid var( --woofund-radio-border );
	border-radius: 50%;
	margin: 0 0.5em 0 0;
	vertical-align: middle;
	flex-shrink: 0;
	cursor: pointer;
	background: var( --woofund-surface );
	outline: none;
}

.woofund-tier-selector__option input[type="radio"]:checked {
	border-color: var( --woofund-radio-checked );
	border-width: 5px;
}

.woofund-tier-selector__option input[type="radio"]:focus-visible {
	box-shadow: 0 0 0 2px var( --woofund-surface ), 0 0 0 4px var( --woofund-primary );
}

.woofund-tier-selector__name {
	font-weight: 600;
}

.woofund-tier-selector__amount {
	font-weight: 600;
}

.woofund-tier-selector__desc {
	display: block;
	margin-top: 0.25em;
	font-size: 0.9em;
	opacity: 0.85;
}

/* ─── Donation-only input ───────────────────────────────── */

.woofund-donation-input {
	position: relative;
	margin: 0 0 1em;
}

.woofund-donation-input label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.25em;
}

.woofund-donation-input__prefix {
	position: absolute;
	top: auto;
	bottom: 2.2em;
	left: 0.6em;
	font-weight: 600;
	opacity: 0.75;
	pointer-events: none;
	/* Positioning is approximate and theme-dependent; themes can
	 * override via `.woofund-donation-input__prefix`. */
}

.woofund-donation-input input[type="text"] {
	width: 100%;
	min-height: 2.5em;
	padding-left: 2em;
	font-size: 1em;
}

.woofund-donation-input__help {
	margin: 0.25em 0 0;
	font-size: 0.85em;
	opacity: 0.75;
}

/* ─── CTA button ────────────────────────────────────────── */

.woofund-cta {
	width: 100%;
	max-width: 360px;
}

/* ─── Per-tier thank-you block ─────────────────────────── */

.woofund-tier-thankyou {
	margin: 1.5em 0;
	padding: 1em;
	border: 1px solid var( --woofund-border );
	border-left: 4px solid var( --woofund-primary );
	background: var( --woofund-primary-bg );
}

.woofund-tier-thankyou__heading {
	margin: 0 0 0.75em;
	font-size: 1.1em;
	font-weight: 600;
}

.woofund-tier-thankyou__message {
	margin: 0 0 0.75em;
}

.woofund-tier-thankyou__message p:last-child {
	margin-bottom: 0;
}

.woofund-tier-thankyou__files h4 {
	margin: 0.75em 0 0.25em;
	font-size: 0.95em;
}

.woofund-tier-thankyou__files ul {
	margin: 0;
	padding: 0 0 0 1.2em;
}

.woofund-tier-thankyou__files li {
	margin: 0.25em 0;
}

/* ─── Hidden tier celebration ──────────────────────────── */

.woofund-hidden-reveal {
	margin: 1.5em 0;
	padding: 1em;
	border: 1px solid var( --woofund-border );
	border-left: 4px solid var( --woofund-success );
	background: var( --woofund-success-bg );
}

.woofund-hidden-reveal__heading {
	margin: 0 0 0.75em;
	font-size: 1.1em;
	font-weight: 600;
}

.woofund-hidden-reveal__card {
	margin: 0 0 0.75em;
	padding: 0.5em 0;
}

.woofund-hidden-reveal__card:last-child {
	margin-bottom: 0;
}

.woofund-hidden-reveal__title {
	margin: 0 0 0.25em;
	font-size: 1em;
}

.woofund-hidden-reveal__info {
	margin: 0 0 0.25em;
	font-size: 0.9em;
	opacity: 0.85;
}

.woofund-hidden-reveal__desc {
	margin: 0;
	font-size: 0.9em;
	opacity: 0.85;
}

/* ─── Responsive ────────────────────────────────────────── */

@media ( min-width: 768px ) {
	.woofund-goal-bar {
		height: 36px;
	}
}

@media ( min-width: 960px ) {
	.woofund-goal-bar {
		height: 40px;
	}
	.woofund-cta {
		max-width: 280px;
	}
}