/**
 * Skin de marca para el carrito/checkout de WooCommerce (Cart & Checkout
 * Blocks) — mismos tokens que assets/portal.css (que ya reutiliza los
 * hex/tipografía del frontend Next.js), pero acá NO se envuelve en
 * .ifc-portal ni se reemplaza el template del tema (a diferencia del
 * portal de cliente): el carrito/checkout siguen siendo páginas reales
 * de WooCommerce dentro del tema activo, así que este CSS solo
 * "pinta" los bloques de Woo en sí (selectores reales confirmados
 * inspeccionando el DOM: .wp-block-woocommerce-cart,
 * .wp-block-woocommerce-checkout, .wc-block-components-*), no la
 * cabecera/pie del tema.
 */

@font-face {
	font-family: 'IFC Akira';
	src: url('fonts/akira-super-bold.otf') format('opentype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'IFC Helvetica';
	src: url('fonts/helvetica-regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'IFC Helvetica';
	src: url('fonts/helvetica-bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	--ifc-tech-blue: #0f172a;
	--ifc-dark-base: #111827;
	--ifc-action-blue: #3974c9;
	--ifc-action-blue-light: #7fa8dd;
	--ifc-yellow: #efbe53;

	background-color: var(--ifc-dark-base);
	background-image:
		linear-gradient(rgba(57, 116, 201, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(57, 116, 201, 0.08) 1px, transparent 1px);
	background-size: 32px 32px;
	color: #e2e8f0;
	font-family: 'IFC Helvetica', Helvetica, Arial, sans-serif;
	padding: 32px 24px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.wp-block-woocommerce-cart *,
.wp-block-woocommerce-checkout * {
	color: inherit;
}

/* Título de página (WordPress "Cart"/"Checkout" de arriba, fuera del
   bloque de Woo pero visualmente conviene que combine). */
.woocommerce-cart .wp-block-post-title,
.woocommerce-checkout .wp-block-post-title {
	font-family: 'IFC Akira', sans-serif;
	font-weight: 900;
	font-style: italic;
	text-transform: uppercase;
	color: var(--ifc-yellow, #efbe53);
}

.wc-block-components-checkout-step__title,
.wc-block-components-title {
	font-family: 'IFC Akira', sans-serif;
	font-weight: 900;
	font-style: italic;
	text-transform: uppercase;
	color: var(--ifc-yellow);
	letter-spacing: 0.02em;
}

/* Inputs de texto/select */
/* !important en background-color/color: el CSS propio de WooCommerce
   define ".wc-block-components-text-input input[type=email]" (y los
   mismos para number/password/tel/text/url), que por el selector de
   atributo pesa MÁS que ".wc-block-components-text-input input" de
   acá — sin !important esas reglas base de Woo ganaban y esos campos
   quedaban con fondo blanco/texto negro (se confirmó inspeccionando
   los estilos computados: no era autofill del navegador). */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-address-form select,
.wc-block-components-combobox input {
	background-color: rgba(255, 255, 255, 0.04) !important;
	border-color: rgba(255, 255, 255, 0.15) !important;
	color: #fff !important;
}
/* Cuando Chrome autocompleta un campo (email guardado, etc. — el caso
   más común es justo un cliente recurrente) fuerza su propio fondo
   claro y texto oscuro, ignorando el color/background de acá arriba —
   se veía como un recuadro blanco roto en medio del checkout oscuro.
   Se neutraliza con el truco estándar del box-shadow inset. */
.wc-block-components-text-input input:-webkit-autofill,
.wc-block-components-combobox input:-webkit-autofill {
	-webkit-text-fill-color: #fff;
	-webkit-box-shadow: 0 0 0 1000px rgb(30, 41, 59) inset;
	box-shadow: 0 0 0 1000px rgb(30, 41, 59) inset;
	caret-color: #fff;
}
/* Las etiquetas de WooCommerce Blocks funcionan como "floating label"
   (viven encima del borde del campo, chiquitas, hasta que el campo tiene
   foco/valor) — el gris original (#94a3b8) se leía mal justo ahí porque
   además hereda el fondo casi negro del bloque. Subido a un gris más
   claro + peso semibold para que se lea de entrada qué va en cada campo. */
.wc-block-components-text-input label,
.wc-block-components-combobox label {
	color: #cbd5e1;
	font-weight: 600;
}
/* Cuando el label "flota" arriba del borde (campo con foco o ya lleno),
   WooCommerce le agrega este modificador y lo pinta más chico todavía —
   ahí es donde más se perdía contra el fondo. */
.wc-block-components-text-input.is-active label,
.wc-block-components-combobox.is-active label {
	color: #e2e8f0;
}

/* Opciones de pago / radio */
.wc-block-components-radio-control__option {
	background-color: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.12) !important;
}
.wc-block-components-radio-control__option-checked {
	border-color: var(--ifc-action-blue) !important;
	background-color: rgba(57, 116, 201, 0.12);
}
.wc-block-components-radio-control__input {
	accent-color: var(--ifc-action-blue);
}

/* Resumen del pedido / totales */
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-cart__totals-title {
	background-color: rgba(255, 255, 255, 0.03);
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.08);
}
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-product-name {
	color: #e2e8f0 !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: var(--ifc-yellow) !important;
	font-weight: 700;
}

/* Botones principales (Proceed to Checkout / Realizar el pedido) */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-cart .wp-element-button,
.wp-block-woocommerce-checkout .wp-element-button {
	background-color: var(--ifc-yellow) !important;
	color: var(--ifc-tech-blue) !important;
	border: none !important;
	border-radius: 4px;
	font-family: 'IFC Helvetica', Helvetica, Arial, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	box-shadow: 0 0 24px 0 rgba(239, 190, 83, 0.25);
	transition: transform 0.15s ease;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-cart .wp-element-button:hover,
.wp-block-woocommerce-checkout .wp-element-button:hover {
	transform: scale(1.02);
}

/* Links secundarios (coupons, "add a note", etc.) */
.wp-block-woocommerce-cart a,
.wp-block-woocommerce-checkout a {
	color: var(--ifc-action-blue-light);
}

/* Íconos/errores de validación siguen legibles sobre fondo oscuro */
.wc-block-components-validation-error {
	color: #fca5a5 !important;
}