/* Namespaced theme variables for visual donation form */
.charitable-visual-donation-form {
	/* Spacing */
	--charitable-field-gap: 16px;
	--charitable-input-padding-y: 10px;
	--charitable-input-padding-x: 12px;
	--charitable-fieldset-margin: 16px 0;
	--charitable-fieldset-padding: 12px;
	--charitable-label-margin-bottom: 6px;
	--charitable-description-margin-top: 4px;
	--charitable-field-margin-bottom: var(--charitable-field-gap);
	--charitable-section-gap: 24px;
	--charitable-button-margin-top: 20px;

	/* Colors */
	--charitable-text-color: inherit;
	--charitable-label-color: inherit;
	--charitable-input-bg: #ffffff;
	--charitable-input-text-color: #000000;
	--charitable-error-color: #dc3232;
	--charitable-error-bg: #f8d7da;
	--charitable-success-color: #28a745;
	--charitable-required-indicator-color: #dc3232;

	/* Borders */
	--charitable-input-border-color: #ccc;
	--charitable-input-border-radius: 4px;
	--charitable-fieldset-border: 0;

	/* Divider */
	--charitable-divider-color: #e0e0e0;
	--charitable-divider-style: solid;

	/* Focus */
	--charitable-focus-ring-color: #0a58ca; /* accessible default */
	--charitable-focus-ring-width: 2px;
	--charitable-focus-ring-offset: 2px;

	/* Typography */
	--charitable-font-family: inherit;
	--charitable-font-size-base: 16px;
	--charitable-label-font-size: 14px;
	--charitable-label-font-weight: 600;
	--charitable-description-font-size: 13px;
	--charitable-description-font-style: normal;
	--charitable-input-font-size: 16px;
	--charitable-input-line-height: 1.5;

	/* Buttons */
	--charitable-button-bg: #0073aa;
	--charitable-button-text-color: #ffffff;
	--charitable-button-border-radius: 4px;
	--charitable-button-padding-y: 12px;
	--charitable-button-padding-x: 24px;
	--charitable-button-font-size: 16px;
	--charitable-button-font-weight: 600;
}

/* Density: Base (now uses tighter spacing) */
.charitable-visual-donation-form.visual-theme-base {
	--charitable-field-gap: 8px;
	--charitable-input-padding-y: 6px;
	--charitable-input-padding-x: 8px;
	--charitable-fieldset-margin: 0;
	--charitable-fieldset-padding: 0;
	--charitable-fieldset-border: 0;
}

/* Ensure base removes fieldset box spacing in all cases */
.charitable-visual-donation-form.visual-theme-base fieldset,
.charitable-visual-donation-form.visual-theme-base .charitable-fieldset {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

/* Density: Spaced (renamed from Compact, now uses standard spacing) */
.charitable-visual-donation-form.visual-theme-spaced {
	--charitable-field-gap: 16px;
	--charitable-input-padding-y: 10px;
	--charitable-input-padding-x: 12px;
	--charitable-fieldset-margin: 16px 0;
	--charitable-fieldset-padding: 12px;
	--charitable-fieldset-border: 0;
}


/* Element rules (scoped) */
.charitable-visual-donation-form .charitable-field,
.charitable-visual-donation-form .charitable-fieldset,
.charitable-visual-donation-form .charitable-form-row {
	margin-bottom: var(--charitable-field-gap);
}

.charitable-visual-donation-form fieldset {
	margin: var(--charitable-fieldset-margin);
	padding: var(--charitable-fieldset-padding);
	border: var(--charitable-fieldset-border);
}

/* Remove borders from charitable-fieldset for all themes */
.charitable-visual-donation-form .charitable-fieldset {
	border: 0;
}

/* Remove padding from nested fieldsets (fieldset within fieldset) */
.charitable-visual-donation-form .charitable-fieldset .charitable-fieldset,
.charitable-visual-donation-form .charitable-fieldset .charitable-fieldset-field-wrapper {
	padding: 0 !important;
}

.charitable-visual-donation-form input[type="text"],
.charitable-visual-donation-form input[type="email"],
.charitable-visual-donation-form input[type="tel"],
.charitable-visual-donation-form input[type="number"],
.charitable-visual-donation-form input[type="date"],
.charitable-visual-donation-form select,
.charitable-visual-donation-form textarea {
	padding: var(--charitable-input-padding-y) var(--charitable-input-padding-x);
	border: var(--charitable-input-border-width, 1px) solid var(--charitable-input-border-color);
	border-radius: var(--charitable-input-border-radius);
	outline: none;
	background-color: var(--charitable-input-bg);
	color: var(--charitable-input-text-color, #000000) !important;
	font-family: var(--charitable-font-family);
	font-size: var(--charitable-input-font-size);
	line-height: var(--charitable-input-line-height);
}

/* Multiple select fields - ensure minimum height for better UX */
.charitable-visual-donation-form select[multiple] {
	min-height: 100px;
}

.charitable-visual-donation-form label {
	color: var(--charitable-label-color);
	font-size: var(--charitable-label-font-size);
	font-weight: var(--charitable-label-font-weight);
	margin-bottom: var(--charitable-label-margin-bottom);
	font-family: var(--charitable-font-family);
}

/* Override label margin for label-pos-below */
.charitable-visual-donation-form.label-pos-below .charitable-form-field > label {
	margin-bottom: 0 !important;
}

.charitable-visual-donation-form .charitable-form-help-text {
	font-size: var(--charitable-description-font-size);
	font-style: var(--charitable-description-font-style);
	margin-top: var(--charitable-description-margin-top);
	color: var(--charitable-text-color);
	font-family: var(--charitable-font-family);
}

.charitable-visual-donation-form .charitable-form-field {
	margin-bottom: var(--charitable-field-margin-bottom);
}

.charitable-visual-donation-form .charitable-donate-button-submit {
	background-color: var(--charitable-button-bg, #f89d35);
	color: var(--charitable-button-text-color, #ffffff);
	border-radius: var(--charitable-button-border-radius, 4px);
	padding: var(--charitable-button-padding-y, 12px) var(--charitable-button-padding-x, 24px);
	font-size: var(--charitable-button-font-size, 16px);
	font-weight: var(--charitable-button-font-weight, 600);
	margin-top: var(--charitable-button-margin-top, 20px);
	font-family: var(--charitable-font-family, inherit);
	border: none;
	cursor: pointer;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.charitable-visual-donation-form .required {
	color: var(--charitable-required-indicator-color);
}

/* Suggested donation amounts styling for visual forms */
.charitable-visual-donation-form .donation-amounts.donation-suggested-amount {
	grid-template-columns: 1fr;
}

/* Base theme: Remove margin from donation amounts list */
.charitable-visual-donation-form.visual-theme-base .donation-amounts {
	margin: 0 !important;
}

.charitable-visual-donation-form .donation-amount.custom-donation-amount {
	margin: 0;
}

.charitable-visual-donation-form .custom-donation-input {
	max-width: 100%;
}

.charitable-visual-donation-form .donation-amounts.donation-suggested-amount .custom-donation-amount-wrapper {
	padding: 10px 15px 15px 15px;
}

.charitable-visual-donation-form .donation-amount.suggested-donation-amount {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Donate button alignment (applies to single and multistep submit) */
.charitable-visual-donation-form.donate-align-left .charitable-submit-field,
.charitable-visual-donation-form.donate-align-right .charitable-submit-field,
.charitable-visual-donation-form.donate-align-center .charitable-submit-field {
	display: flex;
}

.charitable-visual-donation-form.donate-align-left .charitable-submit-field {
	justify-content: flex-start;
}

.charitable-visual-donation-form.donate-align-right .charitable-submit-field {
	justify-content: flex-end;
}

.charitable-visual-donation-form.donate-align-center .charitable-submit-field {
	justify-content: center;
}

.charitable-visual-donation-form.donate-width-full .charitable-submit-field .charitable-donate-button-submit,
.charitable-visual-donation-form.donate-width-half .charitable-submit-field .charitable-donate-button-submit {
	width: 100%;
}

.charitable-visual-donation-form.donate-width-half .charitable-submit-field {
	max-width: 50%;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 600px) {
	.charitable-visual-donation-form.donate-width-half .charitable-submit-field {
		max-width: 100%;
	}
}

.charitable-visual-donation-form input[type="text"]:focus,
.charitable-visual-donation-form input[type="email"]:focus,
.charitable-visual-donation-form input[type="tel"]:focus,
.charitable-visual-donation-form input[type="number"]:focus,
.charitable-visual-donation-form input[type="date"]:focus,
.charitable-visual-donation-form select:focus,
.charitable-visual-donation-form textarea:focus {
	box-shadow: 0 0 0 var(--charitable-focus-ring-offset) #fff, 0 0 0 calc(var(--charitable-focus-ring-width) + var(--charitable-focus-ring-offset)) var(--charitable-focus-ring-color);
}

.charitable-visual-donation-form .charitable-section-divider {
	border-top: 1px var(--charitable-divider-style) var(--charitable-divider-color);
	margin: var(--charitable-field-gap) 0;
}

/* ========================================
   Label Position: Below
   ======================================== */
.charitable-visual-donation-form.label-pos-below .charitable-form-field {
	display: flex !important;
	flex-direction: column !important;
}

/* Side-by-side donor name fields - ensure parent fieldset allows side-by-side layout */
.charitable-visual-donation-form.label-pos-below .charitable-fieldset.charitable-donor-name-side-by-side {
	display: block !important;
}

/* Side-by-side donor name fields - use flex but with inline-block to maintain side-by-side */
.charitable-visual-donation-form.label-pos-below .charitable-fieldset.charitable-donor-name-side-by-side .charitable-form-field {
	display: inline-flex !important;
	flex-direction: column !important;
	width: calc(50% - 8px) !important;
	box-sizing: border-box !important;
	vertical-align: top !important;
}

.charitable-visual-donation-form.label-pos-below .charitable-form-field > label {
	order: 2 !important;
	margin-top: 6px !important;
	margin-bottom: 0 !important;
}

.charitable-visual-donation-form.label-pos-below .charitable-form-field > input,
.charitable-visual-donation-form.label-pos-below .charitable-form-field > select,
.charitable-visual-donation-form.label-pos-below .charitable-form-field > textarea {
	order: 1 !important;
}

/* Handle nested structures like address fields */
.charitable-visual-donation-form.label-pos-below .charitable-address-fields-container .charitable-form-field {
	display: flex !important;
	flex-direction: column !important;
}

.charitable-visual-donation-form.label-pos-below .charitable-address-fields-container .charitable-form-field > label {
	order: 2 !important;
	margin-top: 6px !important;
	margin-bottom: 0 !important;
}

.charitable-visual-donation-form.label-pos-below .charitable-address-fields-container .charitable-form-field > input,
.charitable-visual-donation-form.label-pos-below .charitable-address-fields-container .charitable-form-field > select {
	order: 1 !important;
}

/* Handle donor name fields */
.charitable-visual-donation-form.label-pos-below .charitable-donor-name-fields-container .charitable-form-field > label {
	order: 2 !important;
	margin-top: 6px !important;
	margin-bottom: 0 !important;
}

.charitable-visual-donation-form.label-pos-below .charitable-donor-name-fields-container .charitable-form-field > input,
.charitable-visual-donation-form.label-pos-below .charitable-donor-name-fields-container .charitable-form-field > select {
	order: 1 !important;
}

/* Handle fieldset labels (like "Your Donation") - use :has() for modern browsers */
.charitable-visual-donation-form.label-pos-below .charitable-fieldset:has(> .charitable-field-label) {
	display: flex !important;
	flex-direction: column !important;
}

.charitable-visual-donation-form.label-pos-below .charitable-fieldset > .charitable-field-label {
	order: 2 !important;
	margin-top: 6px !important;
	margin-bottom: 0 !important;
}

.charitable-visual-donation-form.label-pos-below .charitable-fieldset > [id^="charitable-donation-options-"],
.charitable-visual-donation-form.label-pos-below .charitable-fieldset > .charitable-donation-options {
	order: 1 !important;
}

/* Remove bottom margin from ul elements inside donation options when labels are below */
.charitable-visual-donation-form.label-pos-below .charitable-donation-options ul {
	margin-bottom: 0 !important;
}

/* Adjust margin-top for donation amounts label when labels are below - override general fieldset label rule */
.charitable-visual-donation-form.label-pos-below .charitable-fieldset > .charitable-field-label-donation-amounts {
	margin-top: -10px !important;
	margin-bottom: 20px !important;
}

/* Handle payment section fields */
.charitable-visual-donation-form.label-pos-below #charitable-gateway-fields .charitable-form-field {
	display: flex !important;
	flex-direction: column !important;
}

.charitable-visual-donation-form.label-pos-below #charitable-gateway-fields .charitable-form-field > label {
	order: 2 !important;
	margin-top: 6px !important;
	margin-bottom: 0 !important;
}

.charitable-visual-donation-form.label-pos-below #charitable-gateway-fields .charitable-form-field > input,
.charitable-visual-donation-form.label-pos-below #charitable-gateway-fields .charitable-form-field > select {
	order: 1 !important;
}

/* ========================================
   Multi-Step Form Animations
   ======================================== */

/* Fade Animation - Default for all multistep forms (STRICT FADE ONLY, no transform/position changes) */
.charitable-form-multistep.charitable-multistep-animation-fade .charitable-multistep-field {
	opacity: 0;
	transition: opacity 0.3s ease;
	/* Override any transform from base animations */
	transform: none !important;
}

.charitable-form-multistep.charitable-multistep-animation-fade .charitable-multistep-field.charitable-multistep-field-visible {
	opacity: 1;
	/* Override the fadeIn keyframe animation that includes translateY */
	animation: none !important;
	transform: none !important;
}

/* Ensure fields container doesn't cause layout shifts during animation */
.charitable-form-multistep .charitable-multistep-fields-container {
	position: relative;
	min-height: 100px; /* Prevents container collapse during transitions */
}

/* Smooth step header transitions - FADE ONLY (no transform) */
.charitable-form-multistep.charitable-multistep-animation-fade .charitable-multistep-step-header {
	transition: opacity 0.2s ease;
	transform: none !important;
}

/* ========================================
   Fee Relief Override for Visual Forms
   ======================================== */

/* Override fee-relief plugin inline CSS in visual forms */
/* Apply same fieldset styling as other fieldsets based on theme */
/* Also override .charitable-form-fields .charitable-fieldset from charitable.css */

/* Make fee-relief text green in visual forms (but keep labels with inherited color) */
.charitable-visual-donation-form .charitable-fieldset.fee-relief,
.charitable-visual-donation-form .charitable-fee-relief-fieldset {
	color: #28a745 !important;
}

/* Keep checkbox label with black color */
.charitable-visual-donation-form .charitable-fieldset.fee-relief label,
.charitable-visual-donation-form .charitable-fee-relief-fieldset label {
	color: #000000 !important;
}

/* Make donation total text green */
.charitable-visual-donation-form .charitable-fieldset.fee-relief .charitable-donation-total,
.charitable-visual-donation-form .charitable-fee-relief-fieldset .charitable-donation-total {
	color: #28a745 !important;
}

/* Base theme: Remove all spacing (matches line 70-75) */
.charitable-visual-donation-form.visual-theme-base fieldset.charitable-fieldset.fee-relief,
.charitable-visual-donation-form.visual-theme-base .charitable-fieldset.fee-relief,
.charitable-visual-donation-form.visual-theme-base .charitable-form-fields .charitable-fieldset.fee-relief {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

/* Spaced theme: Use theme-specific values (matches line 82-84) */
.charitable-visual-donation-form.visual-theme-spaced fieldset.charitable-fieldset.fee-relief,
.charitable-visual-donation-form.visual-theme-spaced .charitable-fieldset.fee-relief,
.charitable-visual-donation-form.visual-theme-spaced .charitable-form-fields .charitable-fieldset.fee-relief {
	margin: 16px 0 !important;
	padding: 1.5em 20px 0.5em !important;
	border: 0 !important;
}

/* Default (no theme specified): Use CSS variables (matches line 95-99) */
.charitable-visual-donation-form fieldset.charitable-fieldset.fee-relief,
.charitable-visual-donation-form .charitable-fieldset.fee-relief,
.charitable-visual-donation-form .charitable-form-fields .charitable-fieldset.fee-relief {
	margin: var(--charitable-fieldset-margin) !important;
	padding: var(--charitable-fieldset-padding) !important;
	border: 0 !important;
}