/*
 * GreenPay Gateway — estilos del formulario de tarjeta (checkout clásico y Bloques).
 *
 * Deliberadamente NO fija colores/fondos/bordes de marca: el formulario debe heredar el estilo del tema
 * del comercio (tipografía, color de botones, radios de borde, etc.), no imponer el look de GreenPay.
 * Lo de aquí es solo estructura (grid, alineación) y el rojo de error, que es una convención de UX
 * universal, no una decisión de marca.
 */

/*
 * Mes/Año/CVC en una sola fila de 3 columnas en vez de 3 filas sueltas.
 *
 * `auto-fit` + `minmax()` en vez de un media query a propósito: un media query mide el VIEWPORT, y lo que
 * importa acá es el ancho del formulario, que es otra cosa. En el checkout de Bloques a 1024px la pantalla
 * se reparte en dos columnas —formulario y resumen del pedido—, así que el formulario queda en poco más de
 * 400px mientras el viewport sigue siendo ancho: un `max-width: 480px` nunca se activaría y las tres
 * columnas quedarían apretadas justo en la resolución mínima que soportamos.
 *
 * Con esto el grid se adapta al espacio real: mientras entren tres columnas de 8em las deja, y si no, pasa
 * a dos y luego a una, sin que haga falta acertar ningún punto de corte. Los 8em salen de lo que necesita
 * el mensaje de error más largo de esta fila ("El CVC debe tener 3 dígitos.") para no partirse en cuatro
 * líneas; están en em para que acompañen el tamaño de fuente del tema.
 */
.gpgw-expiry-cvc-row {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 8em, 1fr ) );
	align-items: start;
	gap: 12px;
}

.gpgw-expiry-cvc-row .form-row {
	width: auto;
	float: none;
	margin: 0;
	/* Sin esto, un input con ancho mínimo propio puede desbordar su columna del grid. */
	min-width: 0;
}

/*
 * Los inputs heredan el ancho de su columna en vez de imponer el suyo. Varios temas de WooCommerce le fijan
 * anchos en px o porcentajes a `.input-text`, que dentro de un grid angosto se desborda.
 */
.gpgw-card-form .input-text,
#gpgw-card-form .input-text {
	max-width: 100%;
	box-sizing: border-box;
}

/*
 * La etiqueta del número de tarjeta lleva el asterisco y el ícono de marca al lado. Si el espacio no alcanza,
 * que el ícono baje en vez de empujar el texto fuera de la caja.
 */
.gpgw-card-form label,
#gpgw-card-form label {
	display: block;
	overflow-wrap: break-word;
}

.gpgw-field-error {
	display: block;
	color: #b32d2e;
	font-size: 0.85em;
	margin-top: 2px;
}

/* Input inválido: rojo de error universal, no ligado a la marca. */
#gpgw-card-form .form-row:has( > .gpgw-field-error:not( :empty ) ) .input-text,
.gpgw-card-form .form-row:has( > .gpgw-field-error:not( :empty ) ) .input-text {
	border-color: #b32d2e;
	background: #fff6f5;
}

/*
 * Asterisco de campo obligatorio. WooCommerce ya lo pinta en el checkout clásico con
 * `.woocommerce form .form-row .required`, pero ese selector no aplica dentro del checkout de Bloques
 * (otro árbol de DOM) y las hojas de Bloques no traen ninguna regla `.required` propia, así que ahí salía
 * negro. Se cubren los dos wrappers (el clásico es fieldset#gpgw-card-form, Bloques es .gpgw-card-form) para
 * no depender de que WooCommerce mantenga su regla. Se usa su variable de color, no una de GreenPay.
 */
#gpgw-card-form .required,
.gpgw-card-form .required {
	color: var( --wc-red, #a00 );
	font-weight: 700;
	border: 0;
	text-decoration: none;
}

.gpgw-save-card-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
}

.gpgw-save-card-row input[type='checkbox'] {
	margin-top: 2px;
}

/*
 * Checkbox "Save payment information..." de Bloques (nativo de WooCommerce, no lo renderizamos nosotros):
 * le falta separación respecto al campo de arriba. Selector con "+" para afectar SOLO cuando es hermano
 * directo de nuestro formulario, no el checkbox de guardar tarjeta de otros métodos de pago del sitio.
 */
.gpgw-card-form + .wc-block-components-payment-methods__save-card-info {
	padding-top: 12px;
}

.gpgw-card-brand-icon {
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.03em;
	padding: 1px 6px;
	border-radius: 3px;
	background: #eee;
	color: #555;
	margin-left: 6px;
	vertical-align: middle;
}

/*
 * Sin marca detectada (campo vacío, o dígitos que aún no identifican ninguna): que no quede el badge gris
 * vacío ocupando espacio junto a la etiqueta. Bloques no lo necesita porque ahí el ícono se renderiza
 * condicionalmente ({ brand && renderBrandIcon( brand ) }); en el clásico el <span> siempre existe en el
 * HTML de payment_fields() y updateBrandIcon() solo lo vacía, así que se oculta desde CSS.
 */
.gpgw-card-brand-icon:empty {
	display: none;
}

.gpgw-card-brand-icon.gpgw-brand-visa {
	background: #1a1f71;
	color: #fff;
}

.gpgw-card-brand-icon.gpgw-brand-mastercard {
	background: #eb001b;
	color: #fff;
}

.gpgw-card-brand-icon.gpgw-brand-amex {
	background: #2e77bc;
	color: #fff;
}

.gpgw-card-brand-icon.gpgw-brand-discover {
	background: #ff6000;
	color: #fff;
}

/*
 * Ícono oficial de marca (ya incluido con WooCommerce, ver GPGW_Gateway::get_wc_card_icon_urls()): sin
 * badge de fondo/padding, ya trae sus propios colores. El badge de texto de arriba es el fallback cuando
 * el ícono no está disponible.
 */
.gpgw-card-brand-icon.gpgw-card-brand-icon--svg {
	background: none;
	padding: 0;
}

.gpgw-card-brand-svg {
	/*
	 * Los `!important` no son capricho: los SVG de marca de WooCommerce traen `width="39" height="25"` y sin
	 * esto, alguna regla del tema (`img { width: 100% }` y similares) los deforma. Fijamos una altura y
	 * dejamos el ancho en `auto` para conservar la proporción.
	 *
	 * NO TOCAR PENSANDO QUE EL LOGO DE AMEX ESTÁ RECORTADO. No lo está: el ícono de American Express es una
	 * caja azul con "AM" sobre "EX" alineado a la DERECHA, y esa versión apilada en dos líneas es un logo
	 * oficial — Pentagram la diseñó en 2018 justamente para tamaños pequeños como los checkouts en línea.
	 * Que las letras toquen el borde derecho es parte del diseño, no un corte. Se verificó ampliando el SVG:
	 * el arte es idéntico a cualquier tamaño. Visa y Mastercard, en cambio, llevan su marca centrada y con
	 * aire, por eso se ven distintos al lado.
	 *
	 * 20px es una elección visual, no técnica: los tres archivos comparten proporción (39×25), así que la
	 * misma altura los deja del mismo tamaño y alineados entre sí. Cabe dentro de la línea de la etiqueta,
	 * de modo que cambiar de marca no mueve el espaciado del formulario.
	 */
	height: 20px !important;
	width: auto !important;
	max-width: none !important;
	vertical-align: middle;
	margin-left: 6px;
}

.gpgw-card-form fieldset#gpgw-card-form,
.gpgw-card-form {
	margin-top: 8px;
}

/*
 * Planes de cuotas (Entregable 2): un campo más del formulario, sin fondo/borde de tarjeta propio — misma
 * filosofía del resto de este archivo (heredar el estilo del tema, no imponer el de GreenPay). El select
 * comparte .input-text con los demás campos; solo se agrega el ancho completo por si el tema no se lo da
 * por defecto a un <select>.
 */
/*
 * Logo + descripción de banco (requisito del banco, ver GPGW_Gateway::get_cuotas_plan_branding()): mismos
 * valores que ya usa el plugin en producción (wc-greenpay-payment-service) para este mismo bloque, por
 * consistencia visual entre ambos.
 */
.gpgw-cuotas-info {
	align-items: center;
	display: flex;
	gap: 8px;
	margin-bottom: 4px;
}

.gpgw-cuotas-logo {
	max-height: 32px;
	max-width: 80px;
}

.gpgw-cuotas-description {
	color: #666;
	font-size: 12px;
}

.gpgw-cuotas-wrapper select.input-text {
	width: 100%;
}