/**
 * Proceso de compra: que se vea que se puede entrar con la cuenta.
 *
 * EL PROBLEMA
 * El checkout de bloques pone un enlace «Acceso» diminuto arriba a la derecha
 * del primer paso. Quien ya tiene cuenta no lo ve, sigue adelante como si fuera
 * nuevo, y al llegar al final se encuentra con que su correo ya está registrado.
 *
 * Aquí ese mismo enlace se convierte en un aviso visible con su explicación.
 * Es solo presentación: el enlace y su destino son los de WooCommerce.
 */

.wc-block-checkout__login-prompt {
	--amafi-azul: #14324f;
	--amafi-azul-oscuro: #1d4d78;
	--amafi-dorado: #f1ba63;

	display: block;
	width: 100%;
	margin: 0 0 .4rem;
	padding: .95rem 1.15rem;
	border: 1px solid #e3e7ec;
	border-left: 4px solid var(--amafi-dorado);
	border-radius: 6px;
	background: #f7f8fa;
	color: var(--amafi-azul);
	font-size: .95rem;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	/* El tema subraya todos los enlaces con !important, y el subrayado se
	   propaga al texto explicativo. Aquí se corta. */
	text-decoration: none !important;
	font-weight: 700;
	transition: border-color .15s ease, background .15s ease;
}

/* La explicación va delante; el texto del propio enlace («Acceso») queda
   debajo, que es lo que se pulsa. */
.wc-block-checkout__login-prompt::before {
	content: "¿Ya eres socio o has comprado antes en AMAFI? Entra con tu cuenta antes de seguir: el pedido quedará en tu historial y no tendrás que escribir tus datos.";
	/* inline-block para que no herede el subrayado del enlace. */
	display: inline-block;
	margin-bottom: .55rem;
	font-weight: 400;
	text-decoration: none;
}

/* La palabra que se pulsa, con aspecto de acción. */
.wc-block-checkout__login-prompt::after {
	content: " →";
	font-weight: 700;
}

.wc-block-checkout__login-prompt:hover,
.wc-block-checkout__login-prompt:focus {
	border-color: var(--amafi-dorado);
	background: #fffaf0;
	color: var(--amafi-azul-oscuro);
	text-decoration: none;
}

/* El encabezado del paso coloca el enlace flotando a la derecha del título y
   se montaba encima del campo de correo. Se le deja bajar a su propia línea. */
.wc-block-components-checkout-step__heading {
	flex-wrap: wrap;
}

.wc-block-components-checkout-step__heading-container {
	display: block;
	width: 100%;
}

.wc-block-components-checkout-step__heading-content {
	display: block;
	width: 100%;
	max-width: none;
	margin: .6rem 0 0;
	text-align: left;
}