/* Checkout UX 1.8
   Mantiene el estilo del checkout y reduce el peso visual de los errores.
*/

:root {
	--checkout-ux-error: #b44d37;
	--checkout-ux-error-soft: rgba(180, 77, 55, .34);
	--checkout-ux-error-bg: #fffaf8;
	--checkout-ux-text: #20242a;
	--checkout-ux-muted: #5f6670;
	--checkout-ux-radius: 12px;
}

.checkout-ux-source-hidden,
.checkout-ux-native-suppressed {
	display: none !important;
}

/* Mensajes inline: pequeños, limpios y sin negrita exagerada */
.checkout-ux-native-error,
.checkout-ux-field-error {
	display: block !important;
	margin: 5px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: inherit !important;
	font-size: 12.5px !important;
	line-height: 1.35 !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	color: var(--checkout-ux-error) !important;
	list-style: none !important;
}

/* Si el tema/FunnelKit pinta un bloque rojo dentro del campo, lo neutraliza */
.checkout-ux-invalid .woocommerce-error,
.checkout-ux-invalid [class*="error"] {
	border-top: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* Borde discreto en el control que falla */
.checkout-ux-invalid input:not([type="checkbox"]):not([type="radio"]),
.checkout-ux-invalid select,
.checkout-ux-invalid textarea,
.woocommerce-invalid input:not([type="checkbox"]):not([type="radio"]),
.woocommerce-invalid select,
.woocommerce-invalid textarea,
.woocommerce-invalid-required-field input:not([type="checkbox"]):not([type="radio"]),
[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]) {
	border-color: var(--checkout-ux-error-soft) !important;
	box-shadow: none !important;
}

/* Checkbox de términos */
.checkout-ux-invalid input[type="checkbox"],
.woocommerce-invalid input[type="checkbox"],
[aria-invalid="true"][type="checkbox"] {
	accent-color: var(--checkout-ux-error);
}

.woocommerce-terms-and-conditions-wrapper .checkout-ux-native-error,
.woocommerce-terms-and-conditions-wrapper .checkout-ux-field-error {
	margin-top: 6px !important;
	font-size: 12.5px !important;
}

/* Error de pago: visible, pero no alarmista */
.checkout-ux-alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 16px;
	padding: 12px 13px;
	border: 1px solid var(--checkout-ux-error-soft);
	border-radius: var(--checkout-ux-radius);
	background: var(--checkout-ux-error-bg);
	color: var(--checkout-ux-text);
	font-family: inherit;
	box-shadow: none;
}

.checkout-ux-alert__icon {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--checkout-ux-error);
}

.checkout-ux-alert__icon svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.65;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.checkout-ux-alert__content {
	min-width: 0;
}

.checkout-ux-alert__title {
	margin: 0 0 2px;
	font-size: 13.5px;
	line-height: 1.35;
	font-weight: 650;
	color: var(--checkout-ux-text);
}

.checkout-ux-alert__message {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.45;
	font-weight: 400;
	color: var(--checkout-ux-muted);
}

/* Reduce específicamente el mensaje de términos viejo de Woo/FunnelKit */
.woocommerce-terms-and-conditions-wrapper .woocommerce-error,
.woocommerce-terms-and-conditions-wrapper .woocommerce-invalid-feedback,
.woocommerce-terms-and-conditions-wrapper .error-message {
	font-family: inherit !important;
	font-size: 12.5px !important;
	line-height: 1.35 !important;
	font-weight: 500 !important;
	color: var(--checkout-ux-error) !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 6px 0 0 !important;
}

@media (max-width: 560px) {
	.checkout-ux-native-error,
	.checkout-ux-field-error,
	.woocommerce-terms-and-conditions-wrapper .woocommerce-error,
	.woocommerce-terms-and-conditions-wrapper .woocommerce-invalid-feedback,
	.woocommerce-terms-and-conditions-wrapper .error-message {
		font-size: 12px !important;
		line-height: 1.33 !important;
	}

	.checkout-ux-alert {
		padding: 11px 12px;
		gap: 9px;
		border-radius: 11px;
	}

	.checkout-ux-alert__title {
		font-size: 13px;
	}

	.checkout-ux-alert__message {
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto !important; }
}



/* ---------- Mobile checkout 1.3 ---------- */
@media (max-width: 782px) {
	/* 16px evita el zoom automático de Safari sin desactivar el zoom manual. */
	.woocommerce-checkout input:not([type="checkbox"]):not([type="radio"]),
	.woocommerce-checkout select,
	.woocommerce-checkout textarea,
	form.checkout input:not([type="checkbox"]):not([type="radio"]),
	form.checkout select,
	form.checkout textarea,
	.select2-container .select2-selection,
	.select2-container .select2-selection__rendered,
	.select2-container .select2-search__field,
	.select2-dropdown input,
	.wfacp_main_form input:not([type="checkbox"]):not([type="radio"]),
	.wfacp_main_form select,
	.wfacp_main_form textarea {
		font-size: 16px !important;
	}

	/* Dejamos html/body completamente nativos. Solo evitamos scroll vertical interno
	   en wrappers conocidos del checkout. */
	.wfacp_main_form,
	.wfacp-form,
	.funnelkit-checkout,
	.funnelkit-checkout-form,
	.woocommerce-checkout-review-order,
	.woocommerce-checkout-payment {
		max-height: none !important;
		overflow-y: visible !important;
	}

	/* Estado/País pueden desplazarse internamente, sin barra gruesa. */
	.select2-results__options,
	.select2-dropdown {
		-webkit-overflow-scrolling: touch !important;
		scrollbar-width: none !important;
		-ms-overflow-style: none !important;
	}

	.select2-results__options::-webkit-scrollbar,
	.select2-dropdown::-webkit-scrollbar {
		width: 0 !important;
		height: 0 !important;
		display: none !important;
	}
}

/* ---------- Checkout UX 1.8: limpieza visual pasiva de método regional viejo ---------- */
.checkout-ux-stale-payment-hidden {
	display: none !important;
}

/* ---------- iPhone: reparar viewport si el teclado deja la página atorada ---------- */
@media (max-width: 782px) {
	html.checkout-ux-ios-reflow,
	body.checkout-ux-ios-reflow {
		min-height: 100dvh !important;
		max-height: none !important;
	}

	html.checkout-ux-release-stuck-scroll {
		height: auto !important;
		min-height: 100% !important;
		max-height: none !important;
		overflow-y: auto !important;
	}

	body.checkout-ux-release-stuck-scroll {
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		height: auto !important;
		min-height: 100dvh !important;
		max-height: none !important;
		overflow-y: visible !important;
	}
}