/**
 * Gaselec — Pago de recibos
 *
 * Todo cuelga de .ge-payment: no hay ni un selector global que pueda alcanzar a
 * Elementor, al tema o a formularios de terceros.
 *
 * Nota sobre !important: el reset.css de este sitio incluye reglas globales sobre
 * `button`, `[type="button"]` y `[type="submit"]` — entre ellas, un fondo rosa en
 * :hover y :focus, y un `background: transparent !important` sobre todos los
 * elementos. Los estados de nuestros botones se marcan como importantes por eso, y
 * solo por eso. Sin ellos, el botón principal se vuelve rosa al enfocarlo.
 *
 * La tipografía Montserrat ya la carga el sitio. Aquí solo se referencia.
 */

.ge-payment {
	/* Azul corporativo tomado del propio sitio. */
	--ge-primary: #104e9b;
	--ge-primary-dark: #0d3f7d;
	--ge-secondary: #3963a8;
	--ge-accent: #68a6db;
	--ge-text: #171717;
	--ge-muted: #5b6472;
	--ge-on-dark: #ffffff;
	--ge-background: #fafafa;
	--ge-background-alt: #f1f1f1;
	--ge-border: rgba(16, 78, 155, 0.16);
	--ge-error: #b3261e;
	--ge-error-soft: rgba(179, 38, 30, 0.07);
	--ge-success: #1b6b46;
	--ge-success-soft: rgba(27, 107, 70, 0.08);
	--ge-radius-card: 14px;
	--ge-radius-control: 12px;
	--ge-shadow: 0 1px 2px rgba(23, 23, 23, 0.04), 0 10px 30px rgba(16, 78, 155, 0.07);

	background: transparent;
	color: var(--ge-text);
	font-family: "Montserrat", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	box-sizing: border-box;
}

.ge-payment *,
.ge-payment *::before,
.ge-payment *::after {
	box-sizing: inherit;
}

.ge-payment-card {
	background: #ffffff;
	border: 1px solid var(--ge-border);
	border-radius: var(--ge-radius-card);
	box-shadow: var(--ge-shadow);
	padding: 28px;
	max-width: 860px;
	margin: 0 auto;
}

/* ---------- Cabecera ---------- */

.ge-payment-header {
	margin-bottom: 24px;
}

.ge-payment-headline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.ge-payment-title {
	font-family: inherit;
	font-size: clamp(1.3rem, 1.05rem + 1vw, 1.65rem);
	font-weight: 800;
	line-height: 1.2;
	color: var(--ge-primary);
	margin: 0;
	letter-spacing: -0.01em;
}

/* Etiqueta discreta: avisa de que es un entorno de pruebas sin robar la atención. */
.ge-payment-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--ge-error-soft);
	border: 1px solid rgba(179, 38, 30, 0.3);
	color: var(--ge-error);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.ge-payment-intro {
	margin: 8px 0 0;
	color: var(--ge-muted);
	font-size: 0.95rem;
}

/* ---------- Rejilla de campos ---------- */

.ge-payment-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.ge-payment-block {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}

.ge-payment-label {
	display: block;
	float: none;
	padding: 0;
	width: auto;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--ge-text);
	margin: 0 0 8px;
	line-height: 1.3;
}

.ge-payment-help {
	margin: 6px 0 0;
	font-size: 0.78rem;
	color: var(--ge-muted);
	line-height: 1.4;
}

.ge-payment-inputwrap {
	position: relative;
	display: block;
}

.ge-payment .ge-payment-form input[type="text"] {
	width: 100%;
	min-height: 50px;
	padding: 12px 14px;
	font-family: inherit;
	/* 16px reales: evita que el móvil haga zoom al enfocar. */
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.03em;
	color: var(--ge-text);
	background: var(--ge-background);
	border: 1px solid var(--ge-border);
	border-radius: var(--ge-radius-control);
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.ge-payment .ge-payment-form input[type="text"]::placeholder {
	color: #b8bec7;
	letter-spacing: 0.05em;
}

.ge-payment .ge-payment-form input[type="text"]:hover {
	border-color: var(--ge-accent);
}

.ge-payment .ge-payment-form input[type="text"]:focus,
.ge-payment .ge-payment-form input[type="text"]:focus-visible {
	outline: none;
	background: #ffffff;
	border-color: var(--ge-primary);
	box-shadow: 0 0 0 3px rgba(104, 166, 219, 0.4);
}

.ge-payment .ge-payment-form input[type="text"][aria-invalid="true"] {
	border-color: var(--ge-error);
	background: var(--ge-error-soft);
}

.ge-payment .ge-payment-form input[type="text"]:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.ge-payment-suffix {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ge-muted);
	font-weight: 600;
	pointer-events: none;
}

.ge-payment-inputwrap input[type="text"] {
	padding-right: 34px;
}

/* Referencia: once dígitos, separador y dos de control, igual que en el recibo. */
.ge-payment-refgroup {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ge-payment-field--grow {
	flex: 1 1 auto;
	min-width: 0;
}

.ge-payment-field--narrow {
	flex: 0 0 4.5rem;
}

.ge-payment-separator {
	flex: 0 0 auto;
	color: var(--ge-muted);
	font-weight: 700;
}

/* ---------- Entidad emisora ---------- */

.ge-payment-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ge-payment-option {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 50px;
	padding: 0 18px;
	border: 1px solid var(--ge-border);
	border-radius: var(--ge-radius-control);
	background: var(--ge-background);
	cursor: pointer;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ge-payment-option:hover {
	border-color: var(--ge-accent);
}

.ge-payment-option:focus-within {
	border-color: var(--ge-primary);
	box-shadow: 0 0 0 3px rgba(104, 166, 219, 0.4);
}

.ge-payment .ge-payment-option input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--ge-primary);
}

.ge-payment-option:has(input[type="radio"]:checked) {
	border-color: var(--ge-primary);
	background: rgba(16, 78, 155, 0.06);
}

/* ---------- Mensajes ---------- */

.ge-payment-error {
	margin: 6px 0 0;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--ge-error);
}

.ge-payment-error[hidden] {
	display: none;
}

.ge-payment-status {
	margin-top: 18px;
	font-size: 0.9rem;
}

.ge-payment-status:empty {
	margin-top: 0;
}

.ge-payment-status--error,
.ge-payment-status--info,
.ge-payment-status--ok {
	padding: 13px 16px;
	border-radius: var(--ge-radius-control);
	font-weight: 600;
}

.ge-payment-status--error {
	background: var(--ge-error-soft);
	border: 1px solid rgba(179, 38, 30, 0.35);
	color: var(--ge-error);
}

.ge-payment-status--ok {
	background: var(--ge-success-soft);
	border: 1px solid rgba(27, 107, 70, 0.3);
	color: var(--ge-success);
}

.ge-payment-status--info {
	background: rgba(104, 166, 219, 0.1);
	border: 1px solid rgba(16, 78, 155, 0.25);
	color: var(--ge-primary);
}

/* ---------- Botones ---------- */

.ge-payment-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

/*
 * Los estados llevan !important a propósito: el reset.css del sitio pinta de rosa
 * cualquier botón enfocado o con el ratón encima.
 */
.ge-payment .ge-payment-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 14px 30px;
	border: 1px solid var(--ge-primary);
	border-radius: var(--ge-radius-control);
	background-color: var(--ge-primary) !important;
	color: var(--ge-on-dark) !important;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(16, 78, 155, 0.25);
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}

.ge-payment .ge-payment-button--big {
	flex: 1 1 260px;
	max-width: 340px;
	min-height: 56px;
	font-size: 1.05rem;
}

.ge-payment .ge-payment-button:hover,
.ge-payment .ge-payment-button:focus,
.ge-payment .ge-payment-button:focus-visible,
.ge-payment .ge-payment-button:active {
	background-color: var(--ge-primary-dark) !important;
	border-color: var(--ge-primary-dark);
	color: var(--ge-on-dark) !important;
	box-shadow: 0 4px 14px rgba(16, 78, 155, 0.32);
}

.ge-payment .ge-payment-button:focus-visible {
	outline: 3px solid var(--ge-accent);
	outline-offset: 2px;
}

.ge-payment .ge-payment-button:active {
	transform: translateY(1px);
}

.ge-payment .ge-payment-button[disabled],
.ge-payment .ge-payment-button[aria-busy="true"] {
	opacity: 0.6;
	cursor: progress;
	pointer-events: none;
	box-shadow: none;
}

.ge-payment .ge-payment-button--ghost,
.ge-payment .ge-payment-button--ghost:hover,
.ge-payment .ge-payment-button--ghost:focus,
.ge-payment .ge-payment-button--ghost:focus-visible,
.ge-payment .ge-payment-button--ghost:active {
	flex: 0 0 auto;
	max-width: none;
	background-color: transparent !important;
	color: var(--ge-primary) !important;
	border-color: var(--ge-border);
	box-shadow: none;
	font-weight: 600;
}

.ge-payment .ge-payment-button--ghost:hover,
.ge-payment .ge-payment-button--ghost:focus {
	background-color: var(--ge-background-alt) !important;
	border-color: var(--ge-accent);
}

/* Indicador de carga dentro del botón. */
.ge-payment .ge-payment-button[aria-busy="true"]::before {
	content: "";
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: ge-payment-spin 0.7s linear infinite;
}

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

/* ---------- Paso 2 ---------- */

.ge-payment-validated {
	padding: 18px 20px;
	border-radius: var(--ge-radius-control);
	background: var(--ge-success-soft);
	border: 1px solid rgba(27, 107, 70, 0.3);
}

.ge-payment-validated-title {
	margin: 0 0 4px;
	font-weight: 800;
	color: var(--ge-success);
}

.ge-payment-validated-text {
	margin: 0;
	color: var(--ge-text);
	font-size: 0.95rem;
}

.ge-payment-validated-amount {
	margin: 10px 0 0;
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--ge-text);
}

/* Resultado del simulador: no puede parecer una validación de verdad. */
.ge-payment-validated--simulado {
	background: rgba(104, 166, 219, 0.1);
	border: 1px dashed rgba(16, 78, 155, 0.45);
}

.ge-payment-validated--simulado .ge-payment-validated-title {
	color: var(--ge-primary);
}

/* ---------- Pie de la tarjeta ---------- */

.ge-payment-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--ge-border);
	font-size: 0.78rem;
	color: var(--ge-muted);
	line-height: 1.4;
}

.ge-payment-foot-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 1 1 320px;
}

.ge-payment-lock {
	flex: 0 0 auto;
	color: var(--ge-success);
}

.ge-payment .ge-payment-link {
	color: var(--ge-secondary);
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

.ge-payment .ge-payment-link:hover,
.ge-payment .ge-payment-link:focus-visible {
	color: var(--ge-primary);
}

/* ---------- Páginas de retorno ---------- */

.ge-payment-card--return {
	text-align: center;
	max-width: 600px;
}

.ge-payment-card--return .ge-payment-actions {
	justify-content: center;
}

.ge-payment-returnicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 18px;
	border-radius: 50%;
}

.ge-payment-returnicon--ok {
	background: var(--ge-success-soft);
	color: var(--ge-success);
}

.ge-payment-returnicon--ko {
	background: var(--ge-background-alt);
	color: var(--ge-muted);
}

.ge-payment-list {
	margin: 22px auto 0;
	padding: 0;
	list-style: none;
	text-align: left;
	max-width: 30rem;
}

.ge-payment-list li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 8px;
	font-size: 0.9rem;
	color: var(--ge-muted);
}

.ge-payment-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ge-accent);
}

/* ---------- Última fila: verificación y ayuda ---------- */

.ge-payment-lastrow {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	margin-top: 20px;
}

.ge-payment-turnstile {
	margin: 0;
	min-height: 65px;
}

.ge-payment-turnstile:empty {
	min-height: 0;
}

/* Ayuda para encontrar los datos en el recibo, junto a la verificación. */
.ge-payment-guide {
	padding: 16px 18px;
	background: var(--ge-background-alt);
	border: 1px solid var(--ge-border);
	border-left: 3px solid var(--ge-accent);
	border-radius: var(--ge-radius-control);
}

.ge-payment-guide-title {
	margin: 0 0 6px;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--ge-primary);
}

.ge-payment-guide-text {
	margin: 0 0 6px;
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--ge-muted);
}

.ge-payment-guide-text:last-child {
	margin-bottom: 0;
}

/* ---------- Campo trampa ---------- */

.ge-payment-trap {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Responsive ---------- */

/*
 * Dos columnas en cuanto hay sitio: entidad y referencia arriba, identificación e
 * importe debajo. El formulario cabe de un vistazo, sin scroll.
 */
@media (min-width: 700px) {
	.ge-payment-card {
		padding: 36px 40px;
	}

	.ge-payment-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 28px;
	}

	/*
	 * Verificación y botón a la izquierda, uno debajo del otro; la ayuda a la derecha
	 * ocupando las dos filas. Las posiciones van fijadas a propósito: si se dejan al
	 * criterio del navegador, la maqueta salta cuando el widget de Cloudflare cambia
	 * de tamaño al resolverse.
	 */
	.ge-payment-lastrow {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 28px;
		align-items: start;
	}

	.ge-payment-turnstile {
		grid-column: 1;
		grid-row: 1;
	}

	.ge-payment-lastrow .ge-payment-actions {
		grid-column: 1;
		grid-row: 2;
		margin-top: 0;
	}

	.ge-payment-guide {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	/* Sin verificación, el botón sube a la primera fila. */
	.ge-payment-lastrow:not(:has(.ge-payment-turnstile)) .ge-payment-actions {
		grid-row: 1;
	}

	.ge-payment-lastrow:not(:has(.ge-payment-turnstile)) .ge-payment-guide {
		grid-row: 1;
	}
}

@media (max-width: 699px) {
	.ge-payment .ge-payment-button--big {
		max-width: none;
		width: 100%;
	}

	.ge-payment .ge-payment-button--ghost {
		width: 100%;
	}
}

@media (max-width: 400px) {
	.ge-payment-card {
		padding: 22px 18px;
		border-radius: 12px;
	}

	.ge-payment-field--narrow {
		flex-basis: 4rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ge-payment *,
	.ge-payment *::before,
	.ge-payment *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

@media (prefers-contrast: more) {
	.ge-payment-card {
		border-color: var(--ge-primary);
	}

	.ge-payment-help,
	.ge-payment-foot {
		color: #3a4250;
	}
}