/* FUAM Donaciones 2.3 — barra única de cuatro pasos y separación editorial */

:root {
	--fuam-yellow: #ffbd24;
	--fuam-yellow-hover: #e5a817;
	--fuam-ink: #202b3d;
	--fuam-navy: #202b3d;
	--fuam-muted: #687184;
	--fuam-soft: #9ca3b1;
	--fuam-line: #dfe3e9;
	--fuam-white: #ffffff;
	--fuam-disabled: #d5d9e1;
	--fuam-disabled-text: #707887;
}

/* El selector incluye el contexto real del producto para superar el CSS previo
   de tres pasos sin depender del orden de carga. */
body.single-product .product_cat-donacion
.gform_wrapper form.fuam-donation-form .gf_page_steps {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	max-width: 760px !important;
	margin: 0 auto 64px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: visible !important;
	grid-template-columns: none !important;
}

body.single-product .product_cat-donacion
.gform_wrapper form.fuam-donation-form .gf_page_steps::before,
body.single-product .product_cat-donacion
.gform_wrapper form.fuam-donation-form .gf_page_steps::after {
	display: none !important;
	content: none !important;
}

.fuam-checkout-progress {
	display: block !important;
	width: 100% !important;
	margin: 0 0 42px !important;
	padding: 0 !important;
	border: 0 !important;
}

.fuam-donation-progress-grid {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	max-width: 760px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	border: 0 !important;
	box-sizing: border-box !important;
}

.fuam-checkout-progress .fuam-donation-progress-grid {
	max-width: none !important;
}

.fuam-donation-progress-list {
	position: relative !important;
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	align-items: start !important;
	gap: 0 !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	box-sizing: border-box !important;
}

.fuam-donation-progress-list::before,
.fuam-donation-progress-list::after {
	content: "" !important;
	position: absolute !important;
	top: 27px !important;
	left: 12.5% !important;
	height: 4px !important;
	border-radius: 999px !important;
	z-index: 0 !important;
	box-sizing: border-box !important;
}

.fuam-donation-progress-list::before {
	right: 12.5% !important;
	background: #e4e6ea !important;
}

.fuam-donation-progress-list::after {
	width: 0 !important;
	background: var(--fuam-yellow) !important;
}

.fuam-current-step-2 .fuam-donation-progress-list::after { width: 25% !important; }
.fuam-current-step-3 .fuam-donation-progress-list::after { width: 50% !important; }
.fuam-current-step-4 .fuam-donation-progress-list::after { width: 75% !important; }

.fuam-donation-progress-list > .fuam-gf-step {
	position: relative !important;
	z-index: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 14px !important;
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	opacity: 1 !important;
	box-sizing: border-box !important;
}

.fuam-donation-progress-list > .fuam-gf-step::before,
.fuam-donation-progress-list > .fuam-gf-step::after,
.fuam-donation-progress-list > .fuam-gf-step .gf_step_number::before,
.fuam-donation-progress-list > .fuam-gf-step .gf_step_number::after {
	display: none !important;
	content: none !important;
}

.fuam-donation-progress-list > .fuam-gf-step .gf_step_number {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--fuam-white) !important;
	border: 1px solid #e0e3e8 !important;
	border-radius: 50% !important;
	box-shadow: 0 3px 8px rgba(20, 32, 50, 0.10) !important;
	color: var(--fuam-soft) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	box-sizing: border-box !important;
}

.fuam-donation-progress-list > .fuam-gf-step.gf_step_active .gf_step_number,
.fuam-donation-progress-list > .fuam-gf-step.gf_step_completed .gf_step_number {
	background: var(--fuam-yellow) !important;
	border-color: var(--fuam-yellow) !important;
	box-shadow: none !important;
	color: var(--fuam-white) !important;
}

.fuam-donation-progress-list > .fuam-gf-step .gf_step_label {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--fuam-soft) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-transform: none !important;
	white-space: nowrap !important;
}

.fuam-donation-progress-list > .fuam-gf-step.gf_step_active .gf_step_label,
.fuam-donation-progress-list > .fuam-gf-step.gf_step_completed .gf_step_label {
	color: var(--fuam-ink) !important;
}

/* Espaciado equilibrado entre la barra, el título de frecuencia, el selector
   y la cuadrícula de montos. */
body.single-product .product_cat-donacion
.gform_wrapper form.fuam-donation-form .fuam-frequency-field,
body.single-product .product_cat-donacion
.gform_wrapper form.fuam-donation-form .fuam-frequency {
	margin-top: 0 !important;
	margin-bottom: 52px !important;
}

body.single-product .product_cat-donacion
.gform_wrapper form.fuam-donation-form .fuam-frequency__title {
	margin-top: 0 !important;
	margin-bottom: 30px !important;
}

body.single-product .product_cat-donacion
.gform_wrapper form.fuam-donation-form .fuam-frequency__list {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

@media (max-width: 700px) {
	body.single-product .product_cat-donacion
	.gform_wrapper form.fuam-donation-form .gf_page_steps {
		max-width: 100% !important;
		margin-bottom: 46px !important;
	}

	.fuam-donation-progress-list::before,
	.fuam-donation-progress-list::after {
		top: 22px !important;
	}

	.fuam-donation-progress-list > .fuam-gf-step {
		gap: 10px !important;
	}

	.fuam-donation-progress-list > .fuam-gf-step .gf_step_number {
		width: 46px !important;
		height: 46px !important;
		min-width: 46px !important;
		font-size: 17px !important;
	}

	.fuam-donation-progress-list > .fuam-gf-step .gf_step_label {
		font-size: 12px !important;
		white-space: normal !important;
	}

	body.single-product .product_cat-donacion
	.gform_wrapper form.fuam-donation-form .fuam-frequency-field,
	body.single-product .product_cat-donacion
	.gform_wrapper form.fuam-donation-form .fuam-frequency {
		margin-bottom: 38px !important;
	}
}


/* Separación estable entre la barra y el contenido de cada página.
   No depende de la clase del producto ni de la plantilla de Elementor. */
.gform_wrapper form.fuam-donation-form .gf_page_steps,
.gform_wrapper form.fuam-donation-form .gform_page_steps {
	margin-top: 0 !important;
	margin-right: auto !important;
	margin-bottom: 64px !important;
	margin-left: auto !important;
}

@media (max-width: 700px) {
	.gform_wrapper form.fuam-donation-form .gf_page_steps,
	.gform_wrapper form.fuam-donation-form .gform_page_steps {
		margin-bottom: 46px !important;
	}
}

/* Corrección 2.5.0: el filtro gform_progress_steps puede sustituir el
   contenedor .gf_page_steps completo. Por eso el espacio se aplica también
   directamente a la cuadrícula FUAM, que siempre permanece en el DOM. */
.gform_wrapper form.fuam-donation-form .gf_page_steps,
.gform_wrapper form.fuam-donation-form .gform_page_steps,
form.fuam-donation-form .gf_page_steps,
form.fuam-donation-form .gform_page_steps {
	margin-bottom: 0 !important;
}

.gform_wrapper form.fuam-donation-form .fuam-donation-progress-grid,
form.fuam-donation-form .fuam-donation-progress-grid {
	margin-top: 0 !important;
	margin-right: auto !important;
	margin-bottom: 64px !important;
	margin-left: auto !important;
}


/* La clase propia basta para identificar la barra, aunque la plantilla retire
   o reescriba clases del formulario. */
.fuam-donation-progress-grid {
	margin-bottom: 64px !important;
}

.fuam-frequency-field,
.fuam-frequency {
	margin-top: 0 !important;
	margin-bottom: 52px !important;
}

.fuam-frequency__title {
	margin-top: 0 !important;
	margin-bottom: 30px !important;
}

.fuam-frequency__list {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* En checkout el margen lo controla el nav exterior. */
.fuam-checkout-progress .fuam-donation-progress-grid {
	margin-bottom: 0 !important;
}

/* Selectores sin dependencia de la categoría o de la plantilla del producto. */
.gform_wrapper form.fuam-donation-form .fuam-frequency-field,
.gform_wrapper form.fuam-donation-form .fuam-frequency,
form.fuam-donation-form .fuam-frequency-field,
form.fuam-donation-form .fuam-frequency {
	margin-top: 0 !important;
	margin-bottom: 52px !important;
}

.gform_wrapper form.fuam-donation-form .fuam-frequency__title,
form.fuam-donation-form .fuam-frequency__title {
	margin-top: 0 !important;
	margin-bottom: 30px !important;
}

.gform_wrapper form.fuam-donation-form .fuam-frequency__list,
form.fuam-donation-form .fuam-frequency__list {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Gravity Forms conserva el requisito mediante aria-required; el texto
   “(Required)” no necesita mostrarse en esta interfaz en español. */
.gform_wrapper form.fuam-donation-form .gfield_required,
form.fuam-donation-form .gfield_required {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* El botón final debe poder enviar el formulario cuando “No” está elegido;
   los campos fiscales ocultos se liberan de required mediante JS y PHP. */
.gform_wrapper form.fuam-donation-form .fuam-invoice-no-selected ~ .gform_page_footer .gform_button,
.gform_wrapper form.fuam-donation-form .gform_page_footer .gform_button[type="submit"],
form.fuam-donation-form .gform_page_footer .gform_button[type="submit"] {
	pointer-events: auto !important;
}

@media (max-width: 700px) {
	.fuam-donation-progress-grid,
	.gform_wrapper form.fuam-donation-form .fuam-donation-progress-grid,
	form.fuam-donation-form .fuam-donation-progress-grid {
		margin-bottom: 46px !important;
	}

	.gform_wrapper form.fuam-donation-form .fuam-frequency-field,
	.gform_wrapper form.fuam-donation-form .fuam-frequency,
	form.fuam-donation-form .fuam-frequency-field,
	form.fuam-donation-form .fuam-frequency {
		margin-bottom: 38px !important;
	}
}