/* ==========================================================================
   Velia Payments — Estilos de marca para Bold + Addi
   --------------------------------------------------------------------------
   Capa de personalización que viste el botón de Bold y el widget de Addi con
   los tokens del sistema de diseño Velia (oro --gold-600, pills, tipografías).
   NO procesa pagos: solo apariencia.

   IMPORTANTE: los plugins oficiales de Bold y Addi todavía NO están instalados
   en este entorno, así que sus selectores reales (clases/IDs del DOM) no se han
   podido inspeccionar. Por eso:
     - Lo GENÉRICO y SEGURO (variables locales, helpers de marca) se aplica ya.
     - Los selectores específicos de Bold/Addi van ETIQUETADOS como
       "AJUSTAR AL INSPECCIONAR" y, donde hay riesgo de impactar otros métodos
       de pago, se dejan COMENTADOS para activarlos tras inspeccionar el DOM.

   Solo consume variables del tema (tokens.css). No hardcodea valores visuales.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Helpers de marca reutilizables (locales del plugin).
   Centralizan el "look" Velia para no repetirlo en cada selector.
   -------------------------------------------------------------------------- */

/* Botón pill dorado de marca — equivalente a .vv-btn--primary del tema. */
.velia-pay-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 12px 28px;
	border: var(--border-w) solid var(--gold-600);
	border-radius: var(--radius-pill);
	background: var(--gold-600);
	color: var(--text-on-brand);
	font-family: var(--font-rounded);
	font-weight: var(--fw-bold);
	font-size: var(--text-base);
	letter-spacing: 0.01em;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--shadow-pill);
	transition:
		filter var(--dur) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
}

.velia-pay-btn:hover {
	filter: brightness(1.06);
}

.velia-pay-btn:active {
	transform: var(--press-scale); /* Escala a 0.97 al pulsar — motion de marca. */
}

/* Pill suave (tinte oro) — para chips informativos como "Bajo pedido". */
.velia-pay-pill-soft {
	display: inline-flex;
	align-items: center;
	padding: 6px 16px;
	border-radius: var(--radius-pill);
	background: var(--gold-100);
	color: var(--gold-800);
	font-family: var(--font-rounded);
	font-weight: var(--fw-semibold);
	font-size: var(--text-sm);
}

/* ==========================================================================
   BOLD — botón de pago
   --------------------------------------------------------------------------
   Bold renderiza un botón propio (script embebido). Los selectores reales se
   confirman tras instalar el plugin oficial. Mientras tanto:
   ========================================================================== */

/* GENÉRICO Y SEGURO: contenedor de Bold dentro del checkout clásico.
   El espaciado y la alineación no rompen nada aunque cambie el botón interno. */
.bold-button-container,
.payment_method_bold,
.payment_box.payment_method_bold {
	font-family: var(--font-body);
	color: var(--text-body);
}

/* Margen de respiro alrededor del botón embebido de Bold. */
.payment_method_bold .payment_box,
.bold-button-container {
	margin-top: var(--space-3);
}

/*
 * AJUSTAR AL INSPECCIONAR — botón propio de Bold.
 * Bold inyecta su botón con clases internas (p. ej. un <button> o <a> dentro
 * de .bold-button-container). Una vez instalado, inspeccionar el selector real
 * y vestirlo con el look de marca. Selector tentativo:
 *
 * .bold-button-container button,
 * .bold-button-container a {
 *     border-radius: var(--radius-pill) !important;
 *     background: var(--gold-600) !important;
 *     color: var(--text-on-brand) !important;
 *     font-family: var(--font-rounded) !important;
 *     font-weight: var(--fw-bold) !important;
 *     box-shadow: var(--shadow-pill);
 * }
 */

/* ==========================================================================
   ADDI — widget de financiación (página de producto) + método en checkout
   --------------------------------------------------------------------------
   Addi muestra: (1) un widget "Paga a cuotas con Addi" en la página de
   producto, y (2) Addi como método de pago en el checkout clásico.
   Selectores reales por confirmar tras instalar el plugin oficial.
   ========================================================================== */

/* GENÉRICO Y SEGURO: tipografía/color de marca para el bloque de Addi en
   la página de producto. Atributo data-* y clases comunes del widget. */
.addi-widget,
[data-addi-widget],
.addi-product-widget {
	display: block;
	margin: var(--space-4) 0;
	padding: var(--space-4);
	border: var(--border-w) solid var(--gold-300);
	border-radius: var(--radius-md);
	background: var(--gold-050);
	color: var(--text-body);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
}

/* Acento dorado para el monto de la cuota / enlace destacado del widget. */
.addi-widget strong,
.addi-product-widget strong,
[data-addi-widget] b {
	color: var(--gold-700);
	font-family: var(--font-rounded);
	font-weight: var(--fw-bold);
}

/* GENÉRICO Y SEGURO: fila de Addi como método de pago en el checkout clásico.
   .payment_method_addi es el patrón estándar de WooCommerce para gateways. */
.payment_method_addi label,
.payment_method_addi .payment_box {
	font-family: var(--font-body);
	color: var(--text-body);
}

.payment_method_addi .payment_box {
	margin-top: var(--space-3);
	padding: var(--space-3);
	border-radius: var(--radius-sm);
	background: var(--gold-100);
}

/*
 * AJUSTAR AL INSPECCIONAR — botón/CTA propio del widget de Addi.
 * Si el widget incluye un botón "Más información" o un CTA accionable,
 * inspeccionar su selector real y aplicarle el look pill de marca. Tentativo:
 *
 * .addi-widget button,
 * .addi-widget .addi-cta {
 *     border-radius: var(--radius-pill) !important;
 *     background: var(--gold-600) !important;
 *     color: var(--text-on-brand) !important;
 *     font-family: var(--font-rounded) !important;
 *     font-weight: var(--fw-bold) !important;
 *     box-shadow: var(--shadow-pill);
 * }
 */

/* ==========================================================================
   Coherencia general de los métodos de pago en el checkout clásico
   --------------------------------------------------------------------------
   Toques suaves que NO dependen de Bold/Addi: aplican a la lista estándar de
   métodos de pago de WooCommerce y son seguros aunque cambien los gateways.
   ========================================================================== */

/* Radio seleccionado en tono oro de marca (en navegadores que lo soportan). */
.wc_payment_methods input[type="radio"] {
	accent-color: var(--gold-600);
}

/* Etiqueta del método con la voz tipográfica de la marca. */
.wc_payment_methods .payment_method label {
	font-family: var(--font-body);
	color: var(--text-heading);
}