.oa-redsys-card .oa-redsys-row {
	display: block;
	margin-bottom: 40px;
}

.oa-redsys-card .oa-redsys-group {
	display: flex;
	gap: 12px;
}

.oa-redsys-card .oa-redsys-group > span {
	flex: 1;
}

.oa-redsys-card label {
	display: block;
	font-size: var(--wp--preset--font-size--medium) !important;
	margin-bottom: 0.5rem;
}

.oa-redsys-card .oa-redsys-input {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--wp--preset--color--dark-gray);
	border-radius: 16px;

	--gf-local-font-size: 1.25rem!important;
	font-size: 1.25rem!important;

	--gf-local-line-height: 1.3!important;
	line-height: 1.3!important;
	font-family: inherit;

	padding-block-start: 1.5rem !important;
    padding-block-end: 1.4rem !important;
}

.oa-redsys-card .oa-redsys-input::placeholder {
	color: var(--wp--preset--color--gray);
}

.oa-redsys-card .oa-redsys-input:focus {
	border-color: var(--wp--preset--color--contrast);
	outline: none;
}

.oa-redsys-card--busy .oa-redsys-input {
	opacity: 0.6;
	pointer-events: none;
}

/* inSite: las cajas de texto y el botón son iframes alojados por Redsys, así que
   el aspecto interior se les pasa por JavaScript y aquí solo se les da el hueco. */

.oa-redsys-card--insite .oa-redsys-label {
	display: block;
	font-size: var(--wp--preset--font-size--medium) !important;
	margin-bottom: 0.5rem;
}

.oa-redsys-card--insite .oa-redsys-frame,
.oa-redsys-card--insite .oa-redsys-button {
	display: block;
	width: 100%;
	height: 4rem;
}

.oa-redsys-card--insite .oa-redsys-frame iframe,
.oa-redsys-card--insite .oa-redsys-button iframe {
	display: block;
	width: 100%;
	border: 0;
}

.oa-redsys-card--insite .oa-redsys-button {
	margin-top: 24px;
}

/* Mientras se cobra, el botón de Redsys no se puede deshabilitar desde fuera. */
.oa-redsys-card--insite.oa-redsys-card--busy .oa-redsys-frame,
.oa-redsys-card--insite.oa-redsys-card--busy .oa-redsys-button,
.oa-redsys-button--busy {
	opacity: 0.6;
	pointer-events: none;
}

/* El botón de inSite se traslada al pie del formulario, junto a «Volver», donde
   ocupa el hueco del botón de Gravity Forms al que sustituye. Gravity Forms iguala a los hijos del pie con una regla más específica que la
   clase a secas, así que hay que nombrar el pie para que esto se aplique. El
   ancho y el alto se quedan sin !important a propósito: los escribe el
   JavaScript en el propio elemento, copiados del botón al que sustituye. */
.gform_wrapper .gform_page_footer .oa-redsys-button--footer,
.gform_wrapper .gform_footer .oa-redsys-button--footer,
.oa-redsys-button--footer {
	/* Redsys pinta el botón dentro de su propia página, cuyo <body> trae un margen
	   que desde aquí no se puede tocar. Se le reserva ese hueco por los cuatro
	   lados —el alto y el ancho de más los calcula el JavaScript— y se descuenta
	   con los márgenes, para que el botón caiga justo donde iría el de Gravity
	   Forms. Si ese margen cambiara, esta es la única cifra que hay que ajustar. */
	--oa-redsys-frame-inset: 8px;

	display: block !important;
	flex: 0 0 auto !important;
	align-self: flex-start !important;
	box-sizing: border-box !important;
	padding: 0 !important;
	margin-top: calc(2.6rem - var(--oa-redsys-frame-inset)) !important;
	margin-inline: calc(-1 * var(--oa-redsys-frame-inset)) !important;
	margin-bottom: 0 !important;
	width: 21rem;
	min-height: 3.6rem;
}

/* Va después y con la misma especificidad que la regla de arriba: si no, el
   display que hace falta para ganarle a Gravity Forms impediría esconder el
   botón cuando el donante elige otro método de pago. */
.gform_wrapper .gform_page_footer .oa-redsys-button--footer.oa-redsys-hidden,
.gform_wrapper .gform_footer .oa-redsys-button--footer.oa-redsys-hidden,
.oa-redsys-button--footer.oa-redsys-hidden {
	display: none !important;
}

.gform_wrapper .gform_page_footer .oa-redsys-button--footer iframe,
.gform_wrapper .gform_footer .oa-redsys-button--footer iframe,
.oa-redsys-button--footer iframe {
	display: block !important;
	width: 100%;
	border: 0 !important;
}

.oa-redsys-hidden {
	display: none !important;
}

.oa-redsys-error {
	display: none;
	margin-top: 8px;
	font-size: 0.9375rem;
}

.oa-redsys-error--visible {
	display: block;
	color: var(--wp--preset--color--contrast);
}

.oa-redsys-error--info {
	display: block;
	color: var(--wp--preset--color--contrast);
}

.oa-redsys-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.65);
}

.oa-redsys-modal__box {
	background: var(--wp--preset--color--base);
	border-radius: 16px;
	padding: 16px;
	width: min(420px, 92vw);
}

.oa-redsys-modal__frame {
	width: 100%;
	height: min(520px, 70vh);
	border: 0;
}

.oa-redsys-modal__close {
	display: block;
	margin: 12px auto 0;
	background: none;
	border: 0;
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	cursor: pointer;
}

.oa-redsys-methods {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

.oa-redsys-method {
	flex: 1;
	padding: 12px;
	border: 1px solid var(--wp--preset--color--dark-gray);
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: 1rem;
	cursor: pointer;
}

.oa-redsys-method.is-active {
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

.oa-redsys-bizum {
	text-align: center!important;
}

.oa-redsys-bizum__note {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--gray);
}

.oa-redsys-card[data-method="bizum"] .oa-redsys-fields {
	display: none;
}

.oa-redsys-card[data-method="bizum"] .oa-redsys-bizum-note {
	display: block;
}