/* =========================================================================
   Checkout Boost
   Todo va prefijado con .ngcb-checkout: fuera del checkout no aplica nada.

   Criterio: pocas superficies, líneas finas en vez de cajas de color,
   una sola escala de espaciado (múltiplos de 4) y un único acento.
   ========================================================================= */

.ngcb-checkout {
	--ngcb-accent: #00c8ff;
	--ngcb-accent-ink: #05708f;
	--ngcb-ink: #16202a;
	--ngcb-ink-2: #4b5966;
	--ngcb-ink-3: #7b8794;
	--ngcb-line: #e2e7ec;
	--ngcb-line-strong: #c9d2da;
	--ngcb-surface: #fff;
	--ngcb-ok: #0f7a56;
	--ngcb-err: #c0392f;
	--ngcb-radius: 14px;
}

/* -------------------------------------------------------------------------
   1) Campos: 16 px para que iOS no haga zoom, y altura táctil cómoda
   ------------------------------------------------------------------------- */

.ngcb-checkout .woocommerce-checkout input[type="text"],
.ngcb-checkout .woocommerce-checkout input[type="email"],
.ngcb-checkout .woocommerce-checkout input[type="tel"],
.ngcb-checkout .woocommerce-checkout input[type="number"],
.ngcb-checkout .woocommerce-checkout input[type="password"],
.ngcb-checkout .woocommerce-checkout textarea,
.ngcb-checkout .woocommerce-checkout select,
.ngcb-checkout .woocommerce-form-login input[type="text"],
.ngcb-checkout .woocommerce-form-login input[type="password"],
.ngcb-checkout #wc-stripe-hidden-style-input,
.ngcb-checkout .select2-container .select2-selection__rendered,
.ngcb-checkout .select2-container .select2-search__field {
	font-size: 16px !important;
	line-height: 1.4 !important;
}

.ngcb-checkout .woocommerce-checkout input[type="text"],
.ngcb-checkout .woocommerce-checkout input[type="email"],
.ngcb-checkout .woocommerce-checkout input[type="tel"],
.ngcb-checkout .woocommerce-checkout input[type="password"],
.ngcb-checkout .woocommerce-checkout select,
.ngcb-checkout #wc-stripe-hidden-style-input {
	min-height: 48px !important;
}

.ngcb-checkout .select2-container--default .select2-selection--single {
	height: 48px !important;
	display: flex !important;
	align-items: center;
}

.ngcb-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px !important;
}

.ngcb-checkout .woocommerce-checkout .form-row label {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ngcb-ink-2);
}

.ngcb-checkout .woocommerce-checkout .form-row .description,
.ngcb-checkout .ngcb-field-hint {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--ngcb-ink-3);
}

/* Una sola columna de campos: la rejilla mitad/entero descuadraba el ritmo. */
.ngcb-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
.ngcb-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
.ngcb-checkout .woocommerce-billing-fields__field-wrapper > .wcf-column-50 {
	flex: 0 0 100% !important;
	max-width: 100% !important;
	width: 100% !important;
}

/* -------------------------------------------------------------------------
   2) País plegado — el select nunca se deshabilita, solo se oculta
   ------------------------------------------------------------------------- */

.ngcb-checkout .ngcb-country-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	font-size: 13.5px;
	color: var(--ngcb-ink-2);
}

.ngcb-checkout .ngcb-country-summary strong {
	color: var(--ngcb-ink);
	font-weight: 600;
}

.ngcb-checkout .ngcb-country-summary button {
	background: none;
	border: 0;
	padding: 4px 2px;
	font: inherit;
	font-size: 13px;
	color: var(--ngcb-accent-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	min-height: 32px;
}

.ngcb-checkout .ngcb-country-collapsed > label,
.ngcb-checkout .ngcb-country-collapsed > .woocommerce-input-wrapper,
.ngcb-checkout .ngcb-country-collapsed > .select2-container,
.ngcb-checkout .ngcb-country-collapsed > .description {
	display: none !important;
}

.ngcb-checkout .ngcb-country-collapsed {
	margin-bottom: 8px !important;
}

/* -------------------------------------------------------------------------
   3) Casilla de condiciones — 44 px de zona táctil real
   ------------------------------------------------------------------------- */

.ngcb-checkout #terminos_condiciones_checkout > label,
.ngcb-checkout .ngcb-terms-label {
	display: block !important;
	position: relative;
	min-height: 44px;
	padding: 11px 0 11px 32px !important;
	margin: 0 !important;
	cursor: pointer;
	font-size: 13.5px !important;
	line-height: 1.5;
	color: var(--ngcb-ink-2);
	overflow-wrap: anywhere;
}

.ngcb-checkout #terminos_condiciones_checkout input[type="checkbox"] {
	position: absolute;
	left: 0;
	top: 12px;
	width: 20px !important;
	height: 20px !important;
	min-height: 20px !important;
	margin: 0 !important;
	accent-color: var(--ngcb-accent-ink);
}

.ngcb-checkout #terminos_condiciones_checkout a {
	color: var(--ngcb-accent-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
   4) Resumen del pedido
   ------------------------------------------------------------------------- */

/* Con un solo producto, la cabecera «Producto / Subtotal» no añade nada:
   las dos columnas se entienden solas y la tabla respira. */
.ngcb-checkout .woocommerce-checkout-review-order-table thead {
	display: none !important;
}

.ngcb-checkout .woocommerce-checkout-review-order-table .woocommerce-Price-amount {
	white-space: nowrap;
}

.ngcb-checkout .woocommerce-checkout-review-order-table tr.cart_item > td {
	border-top: 0 !important;
	padding-top: 0 !important;
}

/* Con un solo artículo, su precio ya sale en la propia línea del producto:
   la columna de subtotal repetiría el mismo número. Con dos o más, se queda. */
.ngcb-checkout .woocommerce-checkout-review-order-table tbody:has(> tr.cart_item:only-child) td.product-total {
	display: none !important;
}

.ngcb-checkout .woocommerce-checkout-review-order-table td.product-name {
	display: flex !important;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
}

.ngcb-checkout .woocommerce-checkout-review-order-table .product-quantity {
	color: var(--ngcb-ink-3);
	font-weight: 500;
}

/* Anclaje: el precio habitual, tachado, justo encima del total. Solo
   aparece cuando hay una rebaja real. */
.ngcb-checkout tr.ngcb-anchor > th,
.ngcb-checkout tr.ngcb-anchor > td {
	padding: 4px 0 !important;
	border: 0 !important;
	background: none !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.4;
	color: var(--ngcb-ink-3) !important;
}

.ngcb-checkout tr.ngcb-anchor > th {
	text-align: left !important;
	white-space: nowrap;
}

.ngcb-checkout tr.ngcb-anchor > td {
	text-align: right !important;
}

.ngcb-checkout tr.ngcb-anchor s {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	white-space: nowrap;
}

.ngcb-checkout .ngcb-total-note__save {
	color: var(--ngcb-ok);
	font-weight: 600;
}

.ngcb-checkout .ngcb-total-note__save::before {
	content: " · ";
	color: var(--ngcb-ink-3);
	font-weight: 400;
}

/* Fila propia de total: la única que dice qué se cobra hoy. Se mantiene como
   fila de tabla real para que el importe caiga alineado con la columna de
   precios del resto del pedido. */
.ngcb-checkout tr.ngcb-total-today {
	display: table-row !important;
}

.ngcb-checkout tr.ngcb-total-today > th,
.ngcb-checkout tr.ngcb-total-today > td {
	display: table-cell !important;
	padding: 12px 0 2px !important;
	border: 0 !important;
	border-top: 1px solid var(--ngcb-line-strong) !important;
	background: none !important;
	vertical-align: baseline;
}

.ngcb-checkout tr.ngcb-total-today > th {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--ngcb-ink) !important;
	text-align: left !important;
	white-space: nowrap;
}

.ngcb-checkout tr.ngcb-total-today > td {
	text-align: right !important;
}

.ngcb-checkout .ngcb-total-today__amount,
.ngcb-checkout .ngcb-total-today__amount .woocommerce-Price-amount {
	font-size: 22px !important;
	font-weight: 700 !important;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--ngcb-ink) !important;
	white-space: nowrap;
}

.ngcb-checkout tr.ngcb-total-note > td {
	padding: 2px 0 12px !important;
	border: 0 !important;
	background: none !important;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--ngcb-ink-3);
	text-align: left !important;
}

/* Renovación. El sitio ya tiene una regla propia que deja visible SOLO la
   fecha dentro de esta fila (font-size:0 en th y td). Aquí no se toca ese
   tamaño: solo se ordena la fila para que la fecha se lea a lo ancho. */
.ngcb-checkout tr.order-total.recurring-total {
	display: block !important;
	padding: 0 !important;
	border: 0 !important;
}

.ngcb-checkout tr.order-total.recurring-total > th,
.ngcb-checkout tr.order-total.recurring-total > td {
	display: block !important;
	width: auto !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	text-align: left !important;
}

.ngcb-checkout tr.order-total.recurring-total .first-payment-date {
	text-align: left !important;
	color: var(--ngcb-ink-3) !important;
}

/* Con cupón, el sitio muestra su propia fila «Total»: sobraría junto a la
   nuestra, que ya refleja el importe con el descuento aplicado. */
.ngcb-checkout .woocommerce-checkout-review-order-table tr.order-total:not(.recurring-total) {
	display: none !important;
}

/* Aviso de renovación: una línea, no una caja de color. */
.ngcb-checkout tr.ngcb-reassure {
	display: block !important;
	margin-top: 2px;
}

.ngcb-checkout tr.ngcb-reassure > td {
	display: block !important;
	width: auto !important;
	padding: 6px 0 0 !important;
	border: 0 !important;
	background: none !important;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ngcb-ok);
	text-align: left !important;
}

.ngcb-checkout tr.ngcb-reassure .ngcb-reassure__icon {
	display: inline-flex;
	vertical-align: -3px;
	margin-right: 5px;
}

/* Red de seguridad: lo que el sitio decide ocultar, sigue oculto. */
.ngcb-checkout .woocommerce-checkout-review-order-table tr.cart-subtotal,
.ngcb-checkout .woocommerce-checkout-review-order-table tr.recurring-totals {
	display: none !important;
}

/* -------------------------------------------------------------------------
   6) Confianza, justo encima del botón — línea fina, sin caja de color
   ------------------------------------------------------------------------- */

.ngcb-checkout .ngcb-trust {
	display: grid;
	gap: 9px;
	margin: 16px 0 20px;
	padding: 16px 0 0;
	border-top: 1px solid var(--ngcb-line);
	background: none;
}

/* Las dos filas comparten rejilla: un solo eje para los iconos y un solo eje
   para el texto, y ese eje de texto es el mismo del resto de la columna. */
.ngcb-checkout .ngcb-trust__row {
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr);
	gap: 0 10px;
	align-items: center;
}

.ngcb-checkout .ngcb-trust__icon {
	display: block;
	line-height: 0;
	color: var(--ngcb-ok);
}

.ngcb-checkout .ngcb-trust__icon svg {
	display: block;
	width: 16px;
	height: 16px;
}

.ngcb-checkout .ngcb-trust__row p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--ngcb-ink-2);
}

.ngcb-checkout .ngcb-trust__row strong {
	font-weight: 600;
	color: var(--ngcb-ink);
}

.ngcb-checkout .ngcb-trust__row strong::after {
	content: " · ";
	color: var(--ngcb-ink-3);
	font-weight: 400;
}

/* -------------------------------------------------------------------------
   6 bis) Marcas de tarjeta: lo último de la página, centrado en el mismo eje
   ------------------------------------------------------------------------- */

.ngcb-checkout .ngcb-marks {
	display: block;
	/* El tema flota el botón a la derecha en escritorio, así que hay que
	   limpiarlo. Y el aire va en padding, no en margin: la limpieza del
	   flotado se come el margen superior y las tarjetas quedarían pegadas. */
	clear: both;
	width: 100%;
	margin: 0 0 4px;
	padding-top: 22px;
	text-align: center;
}

/* Ancho completo a propósito: si la fila se encoge al contenido, los SVG de
   las tarjetas heredan el max-width:100% del tema, se quedan sin referencia y
   colapsan a cero. Con ancho fijo y min-width en la imagen no puede pasar. */
.ngcb-checkout .ngcb-marks__cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin: 0 0 10px;
}

.ngcb-checkout .ngcb-marks__cards img {
	display: block;
	flex: 0 0 auto;
	width: 44px;
	min-width: 44px;
	height: 28px;
	border-radius: 4px;
	box-shadow: 0 0 0 1px rgba(22, 32, 42, .08);
}

.ngcb-checkout .ngcb-marks__caption {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	font-size: 11.5px;
	font-weight: 500;
	color: var(--ngcb-ink-3);
}

/* -------------------------------------------------------------------------
   7) Huecos muertos y ritmo vertical
   ------------------------------------------------------------------------- */

.ngcb-checkout #customer_details .wcf-col-2,
.ngcb-checkout .wcf-customer-shipping,
.ngcb-checkout .woocommerce-account-fields:empty,
.ngcb-checkout .woocommerce-shipping-fields:empty,
.ngcb-checkout .woocommerce-additional-fields:empty {
	margin: 0 !important;
	padding: 0 !important;
}

.ngcb-checkout .wcf-bump-order-grid-wrap:empty {
	display: none !important;
	margin: 0 !important;
}

/* El aviso de «¿Ya eres cliente?» respira antes del formulario. */
.ngcb-checkout .woocommerce-form-login-toggle {
	margin-bottom: 20px !important;
}

.ngcb-checkout #order_review_heading {
	margin: 0 0 16px !important;
	padding: 0 !important;
}

.ngcb-checkout .wcf-order-wrap {
	margin-top: 8px;
}

/* Los sellos de pago seguro y de garantía que había DEBAJO del botón dicen lo
   mismo que el bloque de confianza que va encima, y centrados bajo una
   columna que no lo está desequilibran el final de la página.
   Para recuperarlos: add_filter( 'ngcb_hide_legacy_badges', '__return_false' ); */
.ngcb-hide-badges .elementor-widget:has(img[src*="pago-seguro-garantizado"]),
.ngcb-hide-badges .elementor-widget:has(img[src*="sello-de-garantia"]) {
	display: none !important;
}

/* Y el contenedor que los envolvía, para que no deje un hueco vacío.
   La cadena es estricta a propósito: solo cae el contenedor cuyo único
   contenido era ese sello, nunca una sección con más cosas dentro. */
.ngcb-hide-badges .e-con:has(> .e-con-inner > .elementor-widget-image > .elementor-widget-container > img[src*="pago-seguro-garantizado"]),
.ngcb-hide-badges .e-con:has(> .e-con-inner > .elementor-widget-image > .elementor-widget-container > img[src*="sello-de-garantia"]) {
	display: none !important;
}

/* -------------------------------------------------------------------------
   8) Validación amable
   ------------------------------------------------------------------------- */

.ngcb-checkout .ngcb-invalid input,
.ngcb-checkout .ngcb-invalid select {
	border-color: var(--ngcb-err) !important;
	box-shadow: 0 0 0 3px rgba(192, 57, 47, .1) !important;
}

.ngcb-checkout .ngcb-error-msg {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ngcb-err);
}

.ngcb-checkout .ngcb-valid input {
	border-color: rgba(15, 122, 86, .5) !important;
}

/* -------------------------------------------------------------------------
   9) Escritorio: una columna, centrada y a un ancho de lectura
   ------------------------------------------------------------------------- */

@media (min-width: 768px) {

	/* El checkout vende un producto: una columna centrada se lee mejor que
	   dos con un riel medio vacío al lado, y el ancho de los campos deja de
	   ser el de la pantalla. Todo comparte el mismo eje.

	   Los !important son necesarios: CartFlows y Elementor fijan anchos y
	   márgenes sobre estos mismos elementos con mayor peso.                */
	.ngcb-checkout form.checkout.woocommerce-checkout,
	.ngcb-checkout .woocommerce-notices-wrapper,
	.ngcb-checkout .woocommerce-form-login-toggle,
	.ngcb-checkout form.woocommerce-form-login {
		width: min(680px, 100%) !important;
		max-width: none !important;
		margin-left: auto !important;
		margin-right: auto !important;
		float: none !important;
	}

	/* Neutralizador. Versiones anteriores de este plugin maquetaban el
	   formulario como una rejilla de dos columnas; si alguna quedó cacheada,
	   o si otro plugin impone una, aquí se deshace: sin rejilla no puede
	   quedar una columna vacía a la derecha. */
	.ngcb-checkout form.checkout.woocommerce-checkout {
		display: block !important;
		grid-template-columns: none !important;
		grid-template-rows: none !important;
		column-gap: normal !important;
	}

	.ngcb-checkout form.checkout.woocommerce-checkout > * {
		grid-column: auto !important;
		grid-row: auto !important;
		width: auto;
		max-width: none;
	}

	/* El contenedor de CartFlows no debe estrechar ni descentrar lo de dentro. */
	.ngcb-checkout .wcf-embed-checkout-form,
	.ngcb-checkout .wcf-embed-checkout-form-one-column {
		margin-left: auto !important;
		margin-right: auto !important;
		float: none !important;
	}

	.ngcb-checkout #customer_details,
	.ngcb-checkout #customer_details .wcf-col-1,
	.ngcb-checkout .wcf-order-wrap,
	.ngcb-checkout #order_review {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
	}

	.ngcb-checkout #customer_details .woocommerce-billing-fields__field-wrapper {
		max-width: none;
	}
}

/* -------------------------------------------------------------------------
   10) Detalles finos
   ------------------------------------------------------------------------- */

.ngcb-checkout .woocommerce-checkout #payment ul.payment_methods li > label {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	font-size: 15px;
	cursor: pointer;
}

.ngcb-checkout .woocommerce-checkout #payment input.input-radio {
	width: 20px;
	height: 20px;
	accent-color: var(--ngcb-accent-ink);
}

.ngcb-checkout a:focus-visible,
.ngcb-checkout button:focus-visible,
.ngcb-checkout input:focus-visible,
.ngcb-checkout select:focus-visible {
	outline: 2px solid var(--ngcb-accent-ink);
	outline-offset: 2px;
}

@media (max-width: 480px) {

	/* La tabla pasa a bloque de arriba abajo. Si solo se cambian las filas,
	   cada una se queda con el ancho de la primera columna en vez del de la
	   tabla, y el importe no llega al margen derecho.
	   Nada de reglas generales sobre tr/th/td: el sitio oculta a propósito
	   subtotales y encabezados periódicos, y una regla amplia los volvería
	   a sacar a la luz. */
	.ngcb-checkout .woocommerce-checkout-review-order-table,
	.ngcb-checkout .woocommerce-checkout-review-order-table tbody,
	.ngcb-checkout .woocommerce-checkout-review-order-table tfoot {
		display: block !important;
		width: 100% !important;
	}

	.ngcb-checkout .woocommerce-checkout-review-order-table thead {
		display: none !important;
	}

	.ngcb-checkout .woocommerce-checkout-review-order-table tr.cart_item,
	.ngcb-checkout .woocommerce-checkout-review-order-table tr.cart_item > td {
		display: block !important;
		width: auto !important;
		text-align: left !important;
		border: 0 !important;
	}

	.ngcb-checkout .woocommerce-checkout-review-order-table tr.cart_item {
		padding: 0 0 12px;
	}

	.ngcb-checkout .woocommerce-checkout-review-order-table tr.cart_item > td.product-total {
		display: none !important;
	}

	/* Etiqueta a la izquierda, importe pegado al margen derecho. */
	.ngcb-checkout tr.ngcb-anchor,
	.ngcb-checkout tr.ngcb-total-today {
		display: flex !important;
		align-items: baseline;
		justify-content: space-between;
		gap: 14px;
	}

	.ngcb-checkout tr.ngcb-anchor {
		padding: 4px 0;
	}

	.ngcb-checkout tr.ngcb-total-today {
		padding: 12px 0 2px;
		border-top: 1px solid var(--ngcb-line-strong);
	}

	.ngcb-checkout tr.ngcb-anchor > th,
	.ngcb-checkout tr.ngcb-anchor > td,
	.ngcb-checkout tr.ngcb-total-today > th,
	.ngcb-checkout tr.ngcb-total-today > td {
		display: block !important;
		width: auto !important;
		padding: 0 !important;
		border-top: 0 !important;
	}

	.ngcb-checkout tr.ngcb-anchor > td,
	.ngcb-checkout tr.ngcb-total-today > td {
		text-align: right !important;
	}

	.ngcb-checkout tr.ngcb-total-note,
	.ngcb-checkout tr.ngcb-total-note > td {
		display: block !important;
		width: auto !important;
	}
}