/**
 * WIST PayPhone Classic Bridge: conformación de la cajita de pago.
 *
 * POR QUE VIVE AQUI Y NO EN EL TEMA
 * La cajita es parte de esta integración. Su CSS viaja con el plugin que la
 * monta, de modo que instalar el bridge en otro sitio de la red trae también
 * su apariencia, y actualizar el tema no la deja atrás.
 *
 * POR QUE NO SE TOCA LA HOJA DE PAYPHONE
 * La cajita se sirve desde el CDN de PayPhone y está construida sobre
 * Bootstrap con el prefijo `ppb-`. Su hoja se descarga en cada carga y
 * cualquier cambio ahí se perdería. Aquí solo se sobreescribe desde fuera.
 *
 * LO QUE HACE POSIBLE ESTO
 * La cajita se monta en el DOM normal: es una aplicación React que se
 * renderiza dentro de `#pp-button`. No hay iframe ni shadow DOM, así que el
 * CSS del sitio la alcanza. El único iframe de su bundle es el de huella de
 * dispositivo, de 100 px y colocado fuera de pantalla.
 *
 * TODO SE ACOTA A #pp-button
 * Sus variables y varias de sus reglas se declaran sobre `:root` y desde ahí
 * alcanzan al documento entero. Es el mismo motivo por el que el sitio ya
 * neutraliza su tipografía con `html:root`.
 *
 * Cero valores de color literales: todo se consume por variable del sitio,
 * con un respaldo razonable por si el plugin se instala donde no existan.
 */

/* ------------------------------------------------------------------ */
/* Contenedor                                                          */
/* -------------------------------------------------------------------
 * La cajita traía dos superficies anidadas, un panel gris y una tarjeta
 * blanca dentro, cada una con su propio relleno. Metida en la tarjeta del
 * resumen quedaban tres cajas una dentro de otra y un relleno enorme, que en
 * un teléfono se come el ancho util.
 *
 * Aquí las dos se vuelven transparentes: la caja del método de pago del
 * checkout ya aporta la superficie.
 * ------------------------------------------------------------------ */

#pp-button {
	width: 100%;
}

#pp-button .ppb-content,
#pp-button .payment-box {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--wist-ink-primary, #1F1F41);
}

/* ------------------------------------------------------------------ */
/* Textos de seccion                                                   */
/* ------------------------------------------------------------------ */

#pp-button .ppb-p.message {
	margin-bottom: 8px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wist-ink-secondary, #62627A);
}

/* ------------------------------------------------------------------ */
/* Seleccion de metodo de pago                                         */
/* -------------------------------------------------------------------
 * Son dos botones, tarjeta y aplicacion. El seleccionado se marca con un
 * contorno naranja de PayPhone; pasa al azul del sitio.
 * ------------------------------------------------------------------ */

#pp-button .ppb-div-btn-control {
	display: inline-flex;
}

#pp-button .ppb-btn-control {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 8px 16px;
	border: 0 !important;
	border-radius: var(--wist-radius-lg, 1.125rem);
	/* Placa de marca, no superficie del sistema. Los logotipos de las redes y
	   el de PayPhone solo existen en version para fondo claro, y sobre el
	   panel oscuro DISCOVER desaparecia por ir en tinta oscura. La placa los
	   deja en su color oficial en los dos modos. En oscuro no es blanca sino
	   el gris azulado mas claro de la paleta, para no gritar sobre el panel.
	   !important: PayPhone pinta de blanco el metodo que no esta elegido. */
	background: var(--wist-brand-plate, #FFFFFF) !important;
	box-shadow: inset 0 0 0 1px var(--wist-border-decorative, #E9E9EC);
	transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

#pp-button .ppb-btn-control:hover {
	box-shadow: inset 0 0 0 1px var(--wist-border-interactive, #8F8FA0);
}

#pp-button .select-btn.ppb-btn-control {
	box-shadow: inset 0 0 0 2px var(--wist-blue-base, #1660FF);
}

#pp-button .ppb-btn-control:focus-visible {
	outline: 2px solid var(--wist-blue-base, #1660FF);
	outline-offset: 3px;
}

/* La tira de marcas es un solo SVG de 181 px de ancho natural. Dentro de un
   boton mas estrecho se recortaba por la derecha y la ultima marca quedaba
   cortada. Con max-width y height auto escala completa en vez de recortarse,
   y el techo de 26 px la limita cuando si cabe. */
#pp-button .ppb-img-btn-control {
	max-width: 100%;
	height: auto;
	max-height: 26px;
	object-fit: contain;
	/* Sin filtro a proposito. La legibilidad la resuelve la placa clara del
	   boton, asi que las marcas conservan su color oficial. Filtrar encima
	   las alteraria sin necesidad. */
}

/* ------------------------------------------------------------------ */
/* Telefono del metodo de aplicacion                                   */
/* -------------------------------------------------------------------
 * Este campo no vive en un .ppb-input-group como los de tarjeta, sino en un
 * .country-selector propio, asi que no le llegaba nada del tratamiento de
 * grupo y el numero quedaba escrito sobre el panel, sin pozo. Se le da el
 * mismo trato: el contorno lo dibuja el grupo y las piezas de dentro no
 * llevan ninguno.
 * ------------------------------------------------------------------ */

#pp-button .country-selector {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	min-height: 2.75rem;
	border-radius: var(--wist-radius-lg, 1.125rem);
	background: var(--wist-field, #FFFFFF);
	box-shadow: inset 0 0 0 1px var(--wist-border-decorative, #E9E9EC);
	transition: box-shadow 0.15s ease;
}

#pp-button .country-selector:focus-within {
	box-shadow: inset 0 0 0 1px var(--wist-blue-base, #1660FF);
}

/* ------------------------------------------------------------------ */
/* Campos de tarjeta                                                   */
/* -------------------------------------------------------------------
 * Cada campo es un input real dentro de un grupo con un icono al costado.
 * PayPhone reparte el radio entre el icono y el campo con clases sueltas
 * (`ppb-border-radius-bs`, `-be-0`, `-ts`, `-0`), lo que dejaba esquinas
 * rectas en medio de la fila.
 *
 * Aqui el grupo se trata como un solo control: el contorno lo dibuja el
 * grupo y las piezas de adentro no llevan ninguno.
 * ------------------------------------------------------------------ */

#pp-button .ppb-input-group {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	min-height: 2.75rem;
	border-radius: var(--wist-radius-lg, 1.125rem);
	background: var(--wist-field, #FFFFFF);
	box-shadow: inset 0 0 0 1px var(--wist-border-decorative, #E9E9EC);
	transition: box-shadow 0.15s ease;
}

#pp-button .ppb-input-group:focus-within {
	box-shadow: inset 0 0 0 1px var(--wist-blue-base, #1660FF);
}

#pp-button .ppb-input-group-text {
	display: flex;
	align-items: center;
	padding: 0 0 0 14px;
	border: 0;
	border-radius: 0;
	background: transparent;
}

/* Los iconos que van ANTES del campo son decorativos: calendario, tarjeta,
   persona. Se atenuan para que no compitan con lo que se escribe. */
#pp-button .ppb-input-group-text:first-child img {
	width: 18px;
	height: 18px;
	opacity: 0.55;
}

/* El que va DESPUES del campo es el identificador de la marca de la tarjeta,
   que aparece al escribir el numero. Ese es informacion, no decoracion: se
   muestra a tamaño legible y sin atenuar. */
#pp-button .ppb-input-group input + .ppb-input-group-text {
	padding: 0 14px 0 8px;
}

#pp-button .ppb-input-group input + .ppb-input-group-text img {
	width: auto;
	height: 26px;
	max-width: 44px;
	opacity: 1;
}

#pp-button .ppb-form-control,
#pp-button .ppb-form-control-paypment-box {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 2.75rem;
	padding: 10px 14px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--wist-ink-primary, #1F1F41);
	font-family: Inter, system-ui, sans-serif;
	/* 1 rem es el minimo: por debajo, iOS hace zoom al enfocar y descoloca
	   el viewport en pleno pago. */
	font-size: 1rem;
	line-height: 24px;
	box-shadow: none;
}

#pp-button .ppb-form-control:focus {
	outline: none;
	box-shadow: none;
}

#pp-button .ppb-form-control::placeholder {
	color: var(--wist-ink-secondary, #62627A);
}

/* Separacion entre campos. PayPhone los apila casi sin aire, y en un
   formulario de tarjeta la cercania hace que se lean como un solo control y
   que el pulgar falle en movil. */
#pp-button .ppb-input-group {
	margin-bottom: 12px;
}

#pp-button .ppb-row {
	margin-bottom: 0;
}

/* Las dos mitades de la fila de vencimiento y CVV llevan su propio contorno,
   asi que necesitan aire entre ellas. */
#pp-button .ppb-col-6.ppb-pe-0 {
	padding-right: 6px;
}

#pp-button .ppb-col-6.ppb-ps-0 {
	padding-left: 6px;
}

/* ------------------------------------------------------------------ */
/* Telefono del metodo PayPhone                                        */
/* -------------------------------------------------------------------
 * El metodo de aplicacion pide un telefono con un selector de codigo de pais
 * delante. Ese selector no tenia fondo ni ancho propio, asi que se montaba
 * sobre el numero y lo tapaba.
 *
 * Se le da ancho propio, fondo del grupo y un separador de un pixel, para que
 * se lea como dos piezas de un mismo control.
 * ------------------------------------------------------------------ */

#pp-button .ppb-input-group .ppb-form-select,
#pp-button .ppb-input-group .ppb-form-select-paypment-box {
	flex: 0 0 auto;
	width: auto;
	min-width: 5.5rem;
	max-width: 40%;
	min-height: 2.75rem;
	padding: 10px 8px 10px 14px;
	border: 0;
	border-radius: 0;
	box-shadow: inset -1px 0 0 var(--wist-border-decorative, #E9E9EC);
	background-color: transparent;
	color: var(--wist-ink-primary, #1F1F41);
	font-family: Inter, system-ui, sans-serif;
	font-size: 1rem;
	line-height: 24px;
}

/* El numero ocupa el resto y nunca se encoge por debajo de lo legible. */
#pp-button .ppb-input-group .ppb-form-select + .ppb-form-control,
#pp-button .ppb-input-group .ppb-form-select ~ input {
	flex: 1 1 auto;
	min-width: 0;
}

/* ------------------------------------------------------------------ */
/* Separador                                                           */
/* ------------------------------------------------------------------ */

#pp-button .ppb-hr.ppb-dashed {
	margin: 20px 0;
	border: 0;
	border-top: 1px solid var(--wist-border-hairline, rgba(31, 31, 65, 0.07));
	opacity: 1;
}

/* ------------------------------------------------------------------ */
/* Total                                                               */
/* -------------------------------------------------------------------
 * PayPhone lo imprime en naranja de marca y en mayusculas, con margenes de
 * 1 rem por lado. En una tarjeta que ya muestra el total del pedido arriba,
 * este es una confirmacion, no un titular: pasa a la tinta del sitio y al
 * mismo peso que el resto.
 * ------------------------------------------------------------------ */

#pp-button .ppb-text-total .ppb-m-3,
#pp-button .ppb-text-amount .ppb-m-3 {
	margin: 0;
}

#pp-button .ppb-text-total .ppb-h4,
#pp-button .ppb-text-amount .ppb-h4 {
	margin: 0;
	font-family: Inter, system-ui, sans-serif;
	font-size: 1rem;
	line-height: 24px;
}

#pp-button .ppb-text-total .ppb-h4 {
	font-weight: 400;
	text-transform: none;
	color: var(--wist-ink-secondary, #62627A);
}

#pp-button .ppb-text-amount .ppb-h4 {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wist-ink-primary, #1F1F41);
}

#pp-button .ppb-row.ppb-mb-3 {
	align-items: center;
	margin-bottom: 16px;
}

/* ------------------------------------------------------------------ */
/* Sellos del pie                                                      */
/* -------------------------------------------------------------------
 * Son señales de confianza y valen la pena, pero no compiten con el boton
 * de pagar: van pequenas y en una sola fila.
 * ------------------------------------------------------------------ */

#pp-button .ppb-footer-image-container {
	margin-top: 4px;
}

#pp-button .ppb-footer-image {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* Los sellos llegan como imagenes de tinta oscura, en una sola version. Sobre
   el panel oscuro quedaban invisibles. El token del sitio invierte la claridad
   y devuelve el tono, asi que el gris se aclara y el naranja de PayPhone sigue
   siendo naranja. Sin el token, el filtro es "none" y no pasa nada. */
#pp-button .ppb-footer-image img {
	/* !important: PayPhone fija el alto de estos SVG en su propia hoja, y sin
	   esto se quedan en los 13 a 15 px de origen, que sobre el panel oscuro
	   son ilegibles. Verificado en produccion: sin !important no aplica. */
	height: 20px !important;
	width: auto !important;
	opacity: 0.85;
	/* Monocromo y no inversion de tono: el sello de PCI mezcla tinta oscura
	   con blanco, y al invertir sus partes blancas se volvian negras. Llevarlo
	   entero a blanco deja los tres sellos legibles y consistentes. */
	filter: var(--wist-img-mono, none);
}

/* ------------------------------------------------------------------ */
/* Errores                                                             */
/* ------------------------------------------------------------------ */

#pp-button .ppb-error-message {
	margin-top: 8px;
	font-size: 0.875rem;
	color: var(--wist-danger-base, #D32F2F);
}

@media (prefers-reduced-motion: reduce) {

	#pp-button .ppb-btn-control,
	#pp-button .ppb-input-group {
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* Lo que PayPhone declara con !important                              */
/* -------------------------------------------------------------------
 * Cuatro reglas suyas usan !important o medidas fijas, y ninguna se puede
 * ganar por especificidad. Se listan aparte para que quede claro que el
 * !important de aquí no es pereza: es la única forma de sobreescribirlas.
 *
 *   .payment-box        flex-basis: 414px !important  → impide el responsive
 *   .select-btn         fondo y borde naranja !important
 *   .ppb-text-amount-h4 color: #ff7300 !important
 *   .ppb-footer-image img  alto fijo de 13 a 15 px
 *   .ppb-btn-control       fondo blanco en el metodo no elegido
 *
 * Si algún día PayPhone las quita, estas reglas dejan de hacer falta y se
 * pueden retirar sin efecto.
 * ------------------------------------------------------------------ */

/* El ancho fijo de 414 px es lo que rompe la cajita dentro de una columna
   estrecha y lo que obliga a hacer scroll lateral en un teléfono. */
#pp-button .payment-box {
	flex-basis: auto !important;
	width: 100% !important;
	max-width: 100% !important;
	background-color: transparent !important;
}

/* El método seleccionado se marca con el azul del sitio, no con el naranja
   de PayPhone, que compite con el botón de pagar. */
#pp-button .select-btn {
	background-color: var(--wist-brand-plate, #FFFFFF) !important;
	border-color: transparent !important;
	box-shadow: inset 0 0 0 2px var(--wist-blue-base, #1660FF) !important;
}

/* El importe: es una confirmación del total que ya está arriba, no un
   titular que deba gritar. */
#pp-button .ppb-text-amount-h4 {
	color: var(--wist-ink-primary, #1F1F41) !important;
}

/* El icono del grupo toma el fondo del propio grupo, no el terciario de
   Bootstrap, que en modo oscuro se veía como una mancha blanca. */
#pp-button .ppb-input-group-text {
	background-color: transparent !important;
}

/* Su alto fijo de 50 px se respeta, pero el relleno y el color son nuestros. */
#pp-button .ppb-form-control-paypment-box {
	background-color: transparent !important;
	color: var(--wist-ink-primary, #1F1F41) !important;
}

/* ------------------------------------------------------------------ */
/* Alerta: faltan datos para habilitar el pago                         */
/* -------------------------------------------------------------------
 * Ocupa el lugar de la cajita mientras el gate no se cumple.
 *
 * Es una alerta del sistema, no una lista con viñetas: en una tarjeta de pago
 * una lista se lee como un formulario dentro de otro. Un mensaje corto dice
 * qué falta, y los nombres de campo son enlaces que llevan a cada uno.
 *
 * NIVEL INFORMATIVO, NO DE ERROR
 * Nadie se equivocó todavía. En un checkout el rojo se lee como "algo salió
 * mal" y frena la compra.
 *
 * POR QUE NO USA EL FONDO SEMANTICO
 * Los cuatro colores semánticos de la paleta no tienen variante oscura, así
 * que un fondo tintado se queda claro en modo oscuro y aparece como un parche
 * brillante. Se sigue el patrón que ya usa el sitio para ese caso: superficie
 * normal, y el color semántico solo en el contorno y en el icono.
 * ------------------------------------------------------------------ */

.wist-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--wist-space-150, 12px);
	padding: var(--wist-space-200, 16px);
	border-radius: var(--wist-radius-md, 0.875rem);
	background: var(--wist-surface, #FFFFFF);
	box-shadow: inset 0 0 0 1px var(--wist-info-base, #1660FF);
}

.wist-alert::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	background-color: var(--wist-info-base, #1660FF);
	-webkit-mask: var(--wist-alert-icon) center / contain no-repeat;
	mask: var(--wist-alert-icon) center / contain no-repeat;
	--wist-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}

.wist-alert__text {
	margin: 0;
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--wist-ink-primary, #1F1F41);
}

/* Cada dato que falta lleva a su campo: nombrar el problema sin llevar a la
   solución deja el trabajo a medias. Van en línea, dentro de la frase. */
.wist-alert__link {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 500;
	color: var(--wist-blue-base, #1660FF);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.wist-alert__link:hover {
	color: var(--wist-blue-base-hover, #0D51E0);
}

.wist-alert__link:focus-visible {
	outline: 2px solid var(--wist-blue-base, #1660FF);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* Telefono del metodo de aplicacion                                   */
/* -------------------------------------------------------------------
 * Su markup real, leido de su hoja:
 *
 *   .country-selector          position: relative
 *     .selected-flag           86 px, absoluta, fondo naranja de marca
 *     input                    padding-left: 97px para dejarle sitio
 *
 * El prefijo no es un select: es una capa absoluta sobre el campo, y el hueco
 * lo reserva el relleno izquierdo del input.
 *
 * DEFECTO QUE ESTO CORRIGE
 * La regla generica de relleno de campo, `padding: 10px 14px`, pisaba ese
 * padding-left de 97 px y el numero quedaba escrito DEBAJO del prefijo.
 * ------------------------------------------------------------------ */

#pp-button .country-selector {
	width: 100%;
}

/* Se devuelve el hueco del prefijo. Va por especificidad, no por !important:
   este selector lleva un elemento mas que la regla generica. */
#pp-button .country-selector input {
	padding-left: 108px;
}

/* El prefijo, con el sistema del sitio en vez del naranja de PayPhone. El
   radio lleva !important porque el suyo tambien lo lleva. */
#pp-button .selected-flag {
	/* 96 px en vez de 86: la bandera, el codigo y el cursor iban apretados.
	   El relleno izquierdo del input acompaña este ancho, porque uno reserva
	   el hueco y el otro lo ocupa. */
	width: 96px;
	padding: 0 10px;
	background-color: var(--wist-surface, #FFFFFF) !important;
	color: var(--wist-ink-primary, #1F1F41) !important;
	font-family: Inter, system-ui, sans-serif;
	font-size: 1rem;
	gap: 6px;
	box-shadow: inset -1px 0 0 var(--wist-border-decorative, #E9E9EC);
	border-top-left-radius: var(--wist-radius-lg, 1.125rem) !important;
	border-bottom-left-radius: var(--wist-radius-lg, 1.125rem) !important;
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

/* ------------------------------------------------------------------ */
/* Botones de accion de la cajita                                      */
/* -------------------------------------------------------------------
 * "Continuar" y "Pagar" salian sin fondo, como texto suelto. Son la accion
 * principal de su paso, asi que toman el tratamiento de boton del sitio.
 * El alto y el relleno llevan !important porque los suyos tambien.
 * ------------------------------------------------------------------ */

/**
 * Secundarios, no primarios.
 *
 * "Continuar" y "Pagar" son pasos DENTRO de la cajita. La accion primaria de
 * la pantalla es "Realizar el pedido", que es la que cierra la compra. Dos
 * botones azules del mismo peso compiten y dejan al cliente sin saber cual
 * termina el proceso.
 *
 * Mismo tamaño que el primario, contorno en vez de relleno. El contorno va
 * como sombra interior para que los dos midan exactamente igual.
 */
#pp-button .ppb-btn-continue,
#pp-button .ppb-btn-pay {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	min-height: 2.75rem !important;
	height: auto !important;
	padding: 10px 20px !important;
	border: 0 !important;
	border-radius: var(--wist-radius-lg, 1.125rem);
	background-color: transparent !important;
	box-shadow: inset 0 0 0 1px var(--wist-border-interactive, #8F8FA0);
	color: var(--wist-ink-primary, #1F1F41) !important;
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 24px;
	margin-bottom: 12px;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.1s ease;
}

#pp-button .ppb-btn-continue:hover,
#pp-button .ppb-btn-pay:hover {
	background-color: var(--wist-surface, #FFFFFF) !important;
}

#pp-button .ppb-btn-continue:active,
#pp-button .ppb-btn-pay:active {
	transform: scale(0.97);
}

#pp-button .ppb-btn-continue:focus-visible,
#pp-button .ppb-btn-pay:focus-visible {
	outline: 2px solid var(--wist-blue-base, #1660FF);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

	#pp-button .ppb-btn-continue,
	#pp-button .ppb-btn-pay {
		transition: none;
	}

	#pp-button .ppb-btn-continue:active,
	#pp-button .ppb-btn-pay:active {
		transform: none;
	}
}


/* ------------------------------------------------------------------ */
/* Boton de finalizar, bloqueado                                       */
/* -------------------------------------------------------------------
 * Mientras el pago no este listo, "Realizar el pedido" se muestra fuera de
 * servicio. Antes se podia pulsar y solo entonces aparecia un error, que es
 * la forma mas cara de decir que no: el cliente ya se habia comprometido con
 * el clic.
 *
 * Se usa aria-disabled y no el atributo disabled: un boton deshabilitado de
 * verdad no recibe foco, y quien navega con teclado se queda sin poder llegar
 * a el ni entender por que no avanza. Asi sigue siendo alcanzable y anunciado,
 * y el clic lo bloquea el propio bridge.
 * ------------------------------------------------------------------ */

.woocommerce-checkout #place_order[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Variante de aviso: el pago no esta disponible. Mismo patron que la
   informativa, con el color de advertencia en contorno e icono. */
.wist-alert--warning {
	box-shadow: inset 0 0 0 1px var(--wist-warning-base, #FFA100);
}

.wist-alert--warning::before {
	background-color: var(--wist-warning-base, #FFA100);
}