/* ==========================================================================
   Donatico — Frontend donation form styles
   All rules scoped under .donatico-form to prevent theme conflicts.
   Mobile-first. Three layout modifiers: --stacked | --inline | --card
   ========================================================================== */

/* ---- CSS custom properties (override in theme for easy re-theming) ---- */
:root {
	--donatico-primary:       #10b981;
	--donatico-primary-hover: #059669;
	--donatico-primary-light: #ecfdf5;
	--donatico-primary-ring:  rgba(16,185,129,.35);
	--donatico-text:          #064e3b;
	--donatico-text-muted:    #6b7280;
	--donatico-border:        #d1fae5;
	--donatico-border-input:  #d1d5db;
	--donatico-error:         #dc2626;
	--donatico-error-bg:      #fef2f2;
	--donatico-radius:        8px;
	--donatico-radius-sm:     4px;
	--donatico-shadow:        0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -1px rgba(0,0,0,.04);
	--donatico-shadow-card:   0 10px 25px -5px rgba(0,0,0,.1), 0 4px 10px -5px rgba(0,0,0,.06);
	--donatico-font:          inherit;
	--donatico-transition:    .18s ease;
}

/* ==========================================================================
   Base — shared by all three layouts
   ========================================================================== */

.donatico-form {
	box-sizing: border-box;
	font-family: var(--donatico-font);
	max-width: 600px;
}

.donatico-form *,
.donatico-form *::before,
.donatico-form *::after {
	box-sizing: inherit;
}

/* ---- Typography ---- */

.donatico-form-title {
	color: var(--donatico-text);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 .5rem;
}

.donatico-form-description {
	color: var(--donatico-text-muted);
	font-size: .95rem;
	margin: 0 0 1.25rem;
}

.donatico-field-label {
	color: var(--donatico-text);
	display: block;
	font-size: .875rem;
	font-weight: 600;
	margin-bottom: .375rem;
}

.donatico-field-hint,
.donatico-optional {
	color: var(--donatico-text-muted);
	font-size: .8rem;
	font-weight: 400;
}

.donatico-required {
	color: var(--donatico-error);
	margin-left: 2px;
}

/* Screen-reader only utility. */
.donatico-sr-only {
	border: 0;
	clip: rect(0,0,0,0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ---- Form fields ---- */

.donatico-field {
	margin-bottom: 1rem;
}

.donatico-input,
.donatico-textarea {
	background: #fff;
	border: 1.5px solid var(--donatico-border-input);
	border-radius: var(--donatico-radius-sm);
	color: var(--donatico-text);
	display: block;
	font-family: inherit;
	font-size: .95rem;
	padding: .6rem .75rem;
	transition: border-color var(--donatico-transition), box-shadow var(--donatico-transition);
	width: 100%;
}

.donatico-input:focus,
.donatico-textarea:focus {
	border-color: var(--donatico-primary);
	box-shadow: 0 0 0 3px var(--donatico-primary-ring);
	outline: none;
}

.donatico-input[aria-invalid="true"],
.donatico-textarea[aria-invalid="true"] {
	border-color: var(--donatico-error);
	box-shadow: 0 0 0 3px rgba(220,38,38,.2);
}

.donatico-textarea {
	min-height: 80px;
	resize: vertical;
}

/* ---- Checkbox ---- */

.donatico-field--checkbox {
	margin-bottom: .75rem;
}

.donatico-checkbox-label {
	align-items: center;
	color: var(--donatico-text-muted);
	cursor: pointer;
	display: flex;
	font-size: .875rem;
	gap: .5rem;
}

.donatico-checkbox-label input[type="checkbox"] {
	accent-color: var(--donatico-primary);
	flex-shrink: 0;
	height: 1rem;
	width: 1rem;
}

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

.donatico-amount-section {
	margin-bottom: 1.25rem;
}

.donatico-amount-grid {
	display: grid;
	gap: .5rem;
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: .75rem;
}

@media (min-width: 480px) {
	.donatico-amount-grid {
		grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
	}
}

.donatico-amount-btn {
	background: #fff;
	border: 2px solid var(--donatico-primary);
	border-radius: 100px;
	color: var(--donatico-primary);
	cursor: pointer;
	font-family: inherit;
	font-size: .9rem;
	font-weight: 600;
	padding: .5rem .75rem;
	transition: background var(--donatico-transition), color var(--donatico-transition), transform var(--donatico-transition), box-shadow var(--donatico-transition);
}

.donatico-amount-btn:hover {
	background: var(--donatico-primary-light);
}

.donatico-amount-btn:focus-visible {
	box-shadow: 0 0 0 3px var(--donatico-primary-ring);
	outline: none;
}

.donatico-amount-btn.is-selected,
.donatico-amount-btn[aria-pressed="true"] {
	background: var(--donatico-primary);
	color: #fff;
	transform: scale(1.03);
}

.donatico-amount-btn--custom {
	border-style: dashed;
}

/* ---- Custom amount input ---- */

.donatico-custom-amount-wrap {
	margin-top: .5rem;
}

.donatico-currency-input-wrap {
	align-items: center;
	background: #fff;
	border: 1.5px solid var(--donatico-border-input);
	border-radius: var(--donatico-radius-sm);
	display: flex;
	transition: border-color var(--donatico-transition), box-shadow var(--donatico-transition);
}

.donatico-currency-input-wrap:focus-within {
	border-color: var(--donatico-primary);
	box-shadow: 0 0 0 3px var(--donatico-primary-ring);
}

.donatico-currency-symbol {
	color: var(--donatico-text-muted);
	font-size: 1rem;
	font-weight: 600;
	padding: 0 .5rem 0 .75rem;
	user-select: none;
}

.donatico-custom-input {
	background: transparent;
	border: none;
	flex: 1;
	font-family: inherit;
	font-size: 1rem;
	min-width: 0;
	outline: none;
	padding: .6rem .75rem .6rem 0;
}

/* Remove spinners from number input. */
.donatico-custom-input::-webkit-outer-spin-button,
.donatico-custom-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}
.donatico-custom-input[type=number] {
	-moz-appearance: textfield;
}

/* ---- Submit button ---- */

.donatico-submit-section {
	margin-top: 1.25rem;
}

/* ---- Elements mode: Payment Element container ---- */
/* .donatico-pay-btn reuses .donatico-submit-btn's own styling (both
   classes are set together in form.js) — nothing extra needed for it. */

.donatico-payment-element {
	margin-bottom: 1rem;
}

/* ---- PayPal button (Model B: shown alongside the regular submit button,
   not swapped in for it — see form.js setupPaypalButton()) ---- */

.donatico-paypal-divider {
	color: var(--donatico-text-muted);
	font-size: .8rem;
	margin: .75rem 0;
	position: relative;
	text-align: center;
}

.donatico-paypal-divider::before,
.donatico-paypal-divider::after {
	background: var(--donatico-border-input);
	content: '';
	height: 1px;
	position: absolute;
	top: 50%;
	width: calc(50% - 1.5rem);
}

.donatico-paypal-divider::before { left: 0; }
.donatico-paypal-divider::after  { right: 0; }

.donatico-paypal-button-container {
	min-height: 45px;
}

.donatico-paypal-button-container paypal-button {
	display: block;
	width: 100%;
}

.donatico-submit-btn {
	background: var(--donatico-primary);
	border: none;
	border-radius: var(--donatico-radius);
	color: #fff;
	cursor: pointer;
	display: block;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .01em;
	padding: .8rem 1.5rem;
	position: relative;
	transition: background var(--donatico-transition), opacity var(--donatico-transition), transform var(--donatico-transition);
	width: 100%;
}

/* The [hidden] attribute selector's specificity ties with the plain class
   selector above, so without this rule the browser's default `[hidden] {
   display: none }` UA style loses to author CSS and the button stays
   visually rendered despite `el.hidden = true` — this is exactly how the
   original .donatico-submit-btn ("Donate $X") stayed on-screen stacked
   underneath the Elements-mode .donatico-pay-btn ("Pay") after form.js set
   submitBtn.hidden = true. A higher-specificity rule targeting the same
   element guarantees hidden always wins, regardless of source order. */
.donatico-submit-btn[hidden] {
	display: none;
}

.donatico-submit-btn:hover:not(:disabled) {
	background: var(--donatico-primary-hover);
	transform: translateY(-1px);
}

.donatico-submit-btn:focus-visible {
	box-shadow: 0 0 0 3px var(--donatico-primary-ring);
	outline: none;
}

.donatico-submit-btn:disabled {
	cursor: not-allowed;
	opacity: .65;
}

/* Loading spinner via CSS — pseudo-element on the button. */
.donatico-submit-btn.is-loading {
	color: transparent;
}

.donatico-submit-btn.is-loading::after {
	animation: donatico-spin .7s linear infinite;
	border: 2.5px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius: 50%;
	content: '';
	height: 18px;
	left: 50%;
	margin: -9px 0 0 -9px;
	position: absolute;
	top: 50%;
	width: 18px;
}

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

/* ---- Secure badge ---- */

.donatico-secure-badge {
	align-items: center;
	color: var(--donatico-text-muted);
	display: flex;
	font-size: .8rem;
	gap: .3rem;
	justify-content: center;
	margin: .6rem 0 0;
}

.donatico-lock-icon {
	flex-shrink: 0;
	opacity: .6;
}

/* ---- Error message ---- */

.donatico-form-error {
	background: var(--donatico-error-bg);
	border: 1px solid var(--donatico-error);
	border-radius: var(--donatico-radius-sm);
	color: var(--donatico-error);
	font-size: .875rem;
	margin-top: .75rem;
	padding: .65rem .875rem;
}

/* ---- Progress bar (inside form) ---- */

.donatico-goal-progress {
	margin-bottom: 1.25rem;
}

.donatico-progress-track {
	background: var(--donatico-border);
	border-radius: 100px;
	height: 10px;
	overflow: hidden;
}

.donatico-progress-fill {
	background: linear-gradient(90deg, var(--donatico-primary), var(--donatico-primary-hover));
	border-radius: 100px;
	height: 100%;
	transform-origin: left center;
	transition: transform .6s cubic-bezier(.4,0,.2,1);
}

.donatico-progress--complete .donatico-progress-fill {
	background: linear-gradient(90deg, #f59e0b, #d97706);
}

.donatico-goal-meta {
	color: var(--donatico-text-muted);
	font-size: .82rem;
	margin: .4rem 0 0;
}

/* ==========================================================================
   Layout: Stacked (default — narrow single column)
   ========================================================================== */

.donatico-form--stacked {
	width: 100%;
}

.donatico-form--stacked .donatico-form-header {
	margin-bottom: 1.25rem;
}

/* ==========================================================================
   Layout: Inline (compact — for sidebars)
   ========================================================================== */

.donatico-form--inline {
	width: 100%;
}

.donatico-form--inline .donatico-amount-row {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
	margin-bottom: .75rem;
}

.donatico-form--inline .donatico-amount-btn {
	border-radius: 100px;
	font-size: .82rem;
	padding: .35rem .7rem;
}

.donatico-form--inline .donatico-inline-donor-row {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin-bottom: .75rem;
}

@media (min-width: 480px) {
	.donatico-form--inline .donatico-inline-donor-row {
		align-items: flex-end;
		flex-direction: row;
	}

	.donatico-form--inline .donatico-inline-donor-row .donatico-field {
		flex: 1;
		margin-bottom: 0;
	}

	.donatico-form--inline .donatico-submit-btn {
		white-space: nowrap;
		width: auto;
	}
}

/* ==========================================================================
   Layout: Card (boxed, two-column desktop)
   ========================================================================== */

.donatico-form--card {
	background: #fff;
	border-radius: 12px;
	box-shadow: var(--donatico-shadow-card);
	overflow: hidden;
	width: 100%;
}

.donatico-form--card .donatico-card-header {
	background: linear-gradient(135deg, var(--donatico-primary), var(--donatico-primary-hover));
	padding: 1.5rem 1.75rem;
}

.donatico-form--card .donatico-card-header .donatico-form-title {
	color: #fff;
	margin-bottom: .25rem;
}

.donatico-form--card .donatico-card-header .donatico-form-description {
	color: rgba(255,255,255,.85);
	margin-bottom: 0;
}

.donatico-form--card .donatico-goal-progress--card {
	background: var(--donatico-primary-light);
	border-bottom: 1px solid var(--donatico-border);
	padding: .875rem 1.75rem;
	margin: 0;
}

.donatico-form--card .donatico-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	/* Grid items default to align-items: stretch, so both columns match
	   the height of the row's tallest item. That's fine when the two
	   columns are naturally similar heights, but Elements mode's card
	   fields (plus Link and the PayPal button) make the info column much
	   taller than the amount-picker column — stretch then leaves a large
	   empty void under the amount buttons. Size each column to its own
	   content instead. */
	align-items: start;
}

@media (min-width: 600px) {
	.donatico-form--card .donatico-card-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.donatico-form--card .donatico-card-col {
	padding: 1.5rem 1.75rem;
}

.donatico-form--card .donatico-card-col--amounts {
	background: var(--donatico-primary-light);
	border-right: 1px solid var(--donatico-border);
}

@media (max-width: 599px) {
	.donatico-form--card .donatico-card-col--amounts {
		border-right: none;
		border-bottom: 1px solid var(--donatico-border);
	}
}

/* --------------------------------------------------------------------- *
 * Recurring frequency toggle (Pro feature)
 * Renders inside the donatico_form_fields action — appears in all
 * 3 layouts (card, stacked, inline) but with layout-specific framing.
 * --------------------------------------------------------------------- */

.donatico-frequency-toggle-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	padding: 0.875rem 0;
}

.donatico-frequency-toggle-wrap label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	cursor: pointer;
	font-size: 0.95rem;
	color: var(--donatico-text, #1a1a1a);
	user-select: none;
}

.donatico-frequency-toggle-wrap input[type="radio"] {
	margin: 0;
	cursor: pointer;
}

/* Card layout: the frequency row spans the full grid width
   so it doesn't collide with the 2-column grid. */
.donatico-form--card .donatico-card-frequency-row {
	padding: 1rem 1.75rem;
	border-bottom: 1px solid var(--donatico-border);
	background: var(--donatico-surface, transparent);
}

.donatico-form--card .donatico-card-frequency-row .donatico-frequency-toggle-wrap {
	padding: 0;
}

/* Stacked / Inline layouts: small vertical breathing room.
   No special wrappers, so we just style the toggle directly. */
.donatico-form--stacked .donatico-frequency-toggle-wrap {
	margin: 0.5rem 0 1rem;
	padding: 0.75rem 0;
	border-top: 1px solid var(--donatico-border);
	border-bottom: 1px solid var(--donatico-border);
}

.donatico-form--inline .donatico-frequency-toggle-wrap {
	margin: 0.5rem 0;
	font-size: 0.875rem;
}

.donatico-form--card .donatico-amount-grid {
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 600px) {
	.donatico-form--card .donatico-amount-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.donatico-form--card .donatico-amount-btn {
	background: #fff;
}

.donatico-form--card .donatico-amount-btn.is-selected {
	background: var(--donatico-primary);
}

.donatico-form--card .donatico-amount-btn .donatico-amount-symbol {
	font-size: .75rem;
	vertical-align: super;
}

.donatico-form--card .donatico-amount-btn .donatico-amount-value {
	font-size: 1.1rem;
}

/* ==========================================================================
   Widgets: Recent donors list
   ========================================================================== */

.donatico-recent-donors {
	list-style: none;
	margin: 0;
	padding: 0;
}

.donatico-donor-item {
	align-items: flex-start;
	display: flex;
	gap: .75rem;
	padding: .6rem 0;
	border-bottom: 1px solid #f3f4f6;
}

.donatico-donor-item:last-child {
	border-bottom: none;
}

.donatico-donor-avatar {
	align-items: center;
	border-radius: 50%;
	color: #fff;
	display: flex;
	flex-shrink: 0;
	font-size: .8rem;
	font-weight: 700;
	height: 36px;
	justify-content: center;
	width: 36px;
}

.donatico-donor-details {
	display: flex;
	flex-direction: column;
	font-size: .875rem;
	gap: .15rem;
	min-width: 0;
}

.donatico-donor-name {
	color: #111827;
	font-weight: 600;
}

.donatico-donor-amount {
	color: var(--donatico-primary-hover);
	font-weight: 600;
}

.donatico-donor-date {
	color: var(--donatico-text-muted);
	font-size: .8rem;
}

.donatico-donor-message {
	color: #4b5563;
	font-style: italic;
	font-size: .83rem;
}

.donatico-no-donors {
	color: var(--donatico-text-muted);
	font-size: .9rem;
}

/* ==========================================================================
   Widgets: Progress bar (standalone)
   ========================================================================== */

.donatico-progress-widget {
	margin: 0;
}

.donatico-progress-meta {
	color: var(--donatico-text-muted);
	font-size: .85rem;
	margin: .4rem 0 0;
}

.donatico-progress-pct {
	color: var(--donatico-text-muted);
}

/* ==========================================================================
   Widgets: Total raised / donation count inline tags
   ========================================================================== */

.donatico-total-raised,
.donatico-donation-count {
	font-weight: 700;
}

/* ==========================================================================
   Thank-you / cancellation page (rendered by ThankYouPage.php)
   ========================================================================== */

.donatico-return-page {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 60vh;
	padding: 2rem 1rem;
}

.donatico-return-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 10px 25px -5px rgba(0,0,0,.08);
	max-width: 520px;
	padding: 3rem 2.5rem;
	text-align: center;
	width: 100%;
}

.donatico-return-icon {
	border-radius: 50%;
	display: inline-flex;
	margin-bottom: 1.25rem;
	padding: .875rem;
}

.donatico-return-icon--success { background: #ecfdf5; color: #059669; }
.donatico-return-icon--cancel  { background: #fef2f2; color: #dc2626; }

.donatico-return-title {
	font-size: 1.75rem;
	font-weight: 700;
	margin: 0 0 .75rem;
}

.donatico-return-message {
	color: #4b5563;
	font-size: 1.05rem;
	line-height: 1.6;
	margin: 0 0 .75rem;
}

.donatico-return-meta {
	color: #6b7280;
	font-size: .9rem;
	margin: 0 0 .75rem;
}

.donatico-return-quote {
	background: #f8fafc;
	border-left: 3px solid #10b981;
	border-radius: 0 4px 4px 0;
	color: #374151;
	font-style: italic;
	margin: 1rem 0;
	padding: .75rem 1rem;
	text-align: left;
}

.donatico-return-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
	margin-top: 1.5rem;
}

.donatico-btn {
	border-radius: 8px;
	display: inline-block;
	font-size: .95rem;
	font-weight: 600;
	padding: .7rem 1.5rem;
	text-decoration: none;
	transition: background .15s, transform .15s;
}

.donatico-btn--primary              { background: #10b981; color: #fff; }
.donatico-btn--primary:hover        { background: #059669; color: #fff; transform: translateY(-1px); }
.donatico-btn--secondary            { background: #f1f5f9; color: #374151; }
.donatico-btn--secondary:hover      { background: #e2e8f0; }